CODEWITHSUNDEEP
phphtmlcss
Kevin
Kevin

Reputation: 1725

CSS Drop down menu - moving everything on the page when activated

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;}

Upvotes: 1

Views: 6619

Answers (2)

Andrew Klatzke
Andrew Klatzke

Reputation: 544

If you wish for the page to not shift down when you add additional content, you need to use position: absolute. Since there isn't an exact example here I can't give an exact example to show you what I mean.

Instead, here are resources that explain CSS positioning:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/ http://www.impressivewebs.com/absolute-position-css/

Just a quick disclaimer - absolute positioning can be your best friend and worst enemy. Make sure you cross-browser test and know what it is you're trying to accomplish.

As long as your items are absolute positioned and given a top and left value, they will not affect page flow.

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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)

Upvotes: 2

Related Questions