Für meine zweite Navigation hab ich folgenden html-code:
HTML-Code:
<nav><ul id="nav_2">
<li><a href="" >Lorem & Ipsum</a></li>
<li><a href="" >Dolor</a></li>
<li><a href="" >Sit</a></li>
<li><a href="" >amet & consetetur</a></li>
</ul></nav>
(Die Navigation ist in einem 30px hohem div untergebracht)
... und folgenden CSS-Code:
Code:
#nav_2 {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav_2 li {
float: left;
margin-left: 1%;
}
#nav_2 li a {
font-size: 30px;
display: block;
padding: 2%;
}
#nav_2 li a:hover {
background-color: white;
color: #000032;
}
Was dabei rauskommt ist dass die ganzen Links auf verschiedenen höhen angezeigt werden:
Warum ist das so, was kann ich dagegen tun?