CODEWITHSUNDEEP
cssnavigationoverflowsubmenu
mcadamsjustin
mcadamsjustin

Reputation: 361

Sub menu is cutoff in navigation menu

My sub-menu is cut off in my navigation menu. I know it has something to do with the overflow:hidden line of css in the navbar id, but if I remove that, the pagecontainer magically gets some major padding

Here is my code:

<div id="pagecontainer">
<div id="header">
    <div id="navmenu">
        <div id="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="doctool"><a href="#">Docs and Tools</a>
                    <ul>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                    </ul></li>
                <li class="spacer"></li>
                <li><a href="#">Contacts</a></li>
                <li class="last"><a href="#">OnCore</a></li>
                </ul>
         </div>
    </div>  
<!-- Close Header --></div>
<div class="container">
  <div id="Footer"></div>

I'm having trouble putting my css in properly, so here's the link to my , jsfiddle

Upvotes: 0

Views: 1452

Answers (2)

Sean Henderson
Sean Henderson

Reputation: 596

I'm not sure how this will effect the layout of your page, but if you increase the height of #navmenu then the submenu will no longer be cutoff.

JS Fiddle

Code adjustment: 

#navmenu {
  margin: auto;
  overflow: hidden;
  padding: 0;
  width: 980px;
  background-image:url('https://dl.dropboxusercontent.com/u/3876653/header.png');
  background-repeat: no-repeat;
  background-position: center top;
  height:300px; /*Edit this value to allow room for sub menu items*/
}

If there are elements directly below the nav bar that get pushed down, then you may need to adjust those accordingly.

Upvotes: 1

Chris Hanson
Chris Hanson

Reputation: 731

Remove the overflow:hidden; from #navmenu

Then instead of using margins for #navmenu use padding: 

#navbar{
  padding-top:132px;
  width:700px;
  height:40px;
  padding-left:140px;
}

Updated fiddle: http://jsfiddle.net/DYF6U/

I believe this has to do with margins collapsing on each other and pushing the parent down. Someone please correct me if I'm wrong.

Here's some documentation on collapsing margins if your interested http://www.w3.org/TR/css3-box/#collapsing-margins

Hope this helps.

Upvotes: 1

Related Questions