XHTMLforum - Problem mit Navigationsleiste

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:

http://www.bilder-hochladen.net/files/jksh-a-d3d9.png

Warum ist das so, was kann ich dagegen tun?