CSS Dropdown not clearing content

[Thrule]

I have been using drop down menu's in websites for a while now, but always just code that I got from a tutorial or some such thing.  Well I am finally coding my own simple one to use wherever I need, and have ran into a bit of a problem.  It works, the only problem being that when you roll over and the sub-menu pops down, it pushes the content down instead of hovering over the content.  I have tried position:relative; and added a z-index, but that didn't fix it.  Any ideas?

 

HTML:

<nav>
<ul class="navi">
<li><a href="#">Home</a></li>
<li>
<a href="#">Shop</a>
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li><a href="#">News & Events</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

 

CSS:

nav {
    float:right;
    margin-top:50px;
}
.navi {
    list-style:none;
    margin:0px;
}
.navi li {
    float:left;
    margin:0px;
}
.navi a {
    display:block;
    background-color:#D5D5D5;
    padding:10px;
}
.navi a:hover {
    text-decoration:none;
}
.navi ul {
    display:none;
    list-style:none;
    margin:0px;
}
.navi ul li {
    float:none;
}
.navi li:hover ul {
    display:block;
}

[Frank P]

Your nested <ul> should get a position:absolute:

.navi li:hover ul {
    display: block;
    position: absolute;
}

 

But your menu won't work in IE6 because IE6 doesn't know li:hover (only a:hover), and you might get a disposition problem in IE6+7. For simple solutions for both, see the last tutorial on my signature page.

[Thrule]

That worked like a charm.  Thanks for the help!  I am perusing your tuts right now.