Question

I have a navigation bar that has been on a site for ages. It works great. Now, I’m trying to add a pull-down effect on one of the navigation items driven by CSS.

The idea is that when you mouse over the ‘pull down menu’ link below, you’ll get a vertical list of additional menu options.

The problem is that when I mouse over the ‘pull down menu’ link below, the resulting pop down box throws off everything below it. The text line in the div container below it wraps, the banner ad gets shifted down and the page basically loses its form.

Is there a way to make it so that the drop down CSS box overlays over the existing page and doesn’t shift all the elements below it?

My navigation row looks like this:

<ul id="navlist">
    <li><a href="">Home</a></li>
    <li><a href="">Products</a></li>        
    <li><a href="">Services</a></li>        
    <li style="float:right"><a href="#">Pull Down Menu</a>
            <ul>
            <li><a href="">Option 1</a></li><br>
            <li><a href="">Option 2</a></li><br>
            <li><a href="">Option 3</a></li><br>
            </ul>
    </li>
</ul>
</div>
//below this I have some other stuff
<div align="center">Here is a line of text about 800 pixles wide</div>
<div align="center">A BANNNER AD GOES HERE</div>
<div align="center">THE BODY OF THE PAGE GOES HERE</div>

Then my CSS looks like this:

ul#navlist    {
width: 980px; line-height: 2em;
list-style-type: none;
clear: both;}

ul#navlist li { display: inline; }
ul#navlist li a {float: center;}
ul#navlist li a:hover {color: #fff;}

ul#navlist ul {display: none;}
ul#navlist li:hover > ul {display: block;}

Answer 1

Although the CSS is fine, it is better to restructure it. It would have been better if you had provided a screenshot of the page with the issue. Okay, I have a solution with me. Check the below code, try restructuring the CSS and HTML this way, although the HTML is kind of same.

HTML

<ul class="nav">
    <li>
        <a href="#">Menu 1</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menu 3</a>
        <ul>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
            <li><a href="#">Sub Menu Item</a></li>
        </ul>
    </li>
</ul>

CSS

* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */

Fiddle:
http://jsfiddle.net/vMuxA/ (Vertical Menu)
http://jsfiddle.net/vMuxA/1/ (Horizontal Menu)