Problem z prostym menu w html

pytanie zadane 18 lutego 2018 w HTML i CSS przez Typovy Nowicjusz (130 p.)
edycja 18 lutego 2018 przez Typovy

Witam,

wytłumaczy mi ktoś dlaczego dolnebelka menu "rozjeżdża" się w tak dziwaczny sposób, mimo, że kod jest praktycznie identyczny?

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <!-- About -->
    <title>#</title>
    <meta name="description" content="#" />
	<meta name="keywords" content="#" />
    <!-- Meta -->
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<!-- Links -->
	<link rel="stylesheet" href="style.css" type="text/css" />
    <!-- JS -->
</head>
    
<body>
    <ul class="up">
        <li class="up"><a class="up" href="#">Support</a></li>
        <li class="up"><a class="up" href="#">Register</a></li>
        <li class="up"><a class="up" href="#">Login</a></li>
    </ul>
    <ul class="dwn">
        <li class="dwn"><a class="dwn" href="#"></a>Home</li>
        <li class="dwn"><a class="dwn" href="#"></a>About us</li>
        <li class="dwn"><a class="dwn" href="#"></a>Contact</li>
    </ul>
</body>
</html>

/* basic */ 
body{
    margin: 0;
}


/* up menu bar */
ul.up{ 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
li.up{
    float: right;
}
li a.up{
    display: block;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}
li a.up:hover{
    background-color: #111;
}
/* dwn menu bar*/ 
ul.dwn{ 
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #fff;
}
li.dwn{
    float: left;
}
li a.dwn{
    display: block;
    color: black;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
}
li a.dwn:hover{
    background-color: #111;
}