Home/ Questions/Q 6861341
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:31:20+00:00

I have a site with a navbar made with a div element. For some

  • 0

I have a site with a navbar made with a div element.

For some reason, the navbar displays outside its containing div.

Moreover, it behaves as inline, i.e. it does not spread across the width of the containing div, but ends the right after the last element it contains. Any following element will be displayed immediately to its right side, on the same line.

HTML:

<body>
    <header>
        <img src="imgs\coolPic.jpg />"
        <div id="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Foobar</a>
                    <ul class="submenu">
                        <li><a href="#">Foo</a></li>
                        <li><a href="#">Bar</a></li>
                    </ul>
                </li>
                <li><a href="#">Lorem Ipsum</a>
                    <ul class="submenu">
                        <li><a href="#">Lorem</a></li>
                        <li><a href="#">Ipsum</a></li>
                    </ul>
                </li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>
    ...more body stuff...
</body>

CSS:

header {
background-color: #cccccc;
}
#nav {
background-color: #cccccc;
border-bottom: 2px solid #000000;
position: absolute;
}
#nav ul li {
float:left;
display:block;
}
#nav ul li a:link,
#nav ul li a:visited
{
display:block;
padding: 8px 12px;
background-color: #cccccc;
text-decoration: none;
color: #111111;
}
#nav ul li a:hover {
background-color: #111111;
color: #cccccc;
}
#nav ul li ul li{
float:none;
display:block;
}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav ul li ul li a:hover{
color:#3B5998;
}
.submenu {
position: absolute;
width: 160px;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;
}

…And, in case you were wondering, here’s the jquery that makes the navbar work properly:

function nav(){
    $('div#nav ul li').mouseover(function() {
    $(this).find('ul:first').show();
    });

    $('div#nav ul li').mouseleave(function() {
    $('div#nav ul li ul').hide();
    });

    $('div#nav ul li ul').mouseleave(function() {
    $('div#nav ul li ul').hide();;
    });
    };

    $(document).ready(function() {
    nav();
    });

(Credit notes: I found the jquery here.)

I tried playing around with the CSS position properties of the header and div #nav elements, but it didn’t help much.

The problem occurs in Firefox, Chrome and IE alike.

Any bright ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove position: absolute from your #nav and add overflow: hidden. If I understood your problem correctly, it should solve it.

    http://jsfiddle.net/Pcth2/

    • 0