Question

I’m currently working on creating my first wordpress theme and I’m having trouble with the horizontal drop down. When hovering, the drop downs appear below the content.

http://pennyjarrdesigns.com/assets/problem1.jpg (screenshot)

I’ve tried using z-index and adjusting relative and absolute positioning and nothing seems to work. Adding absolute to the main div around the navigation produces this:

http://pennyjarrdesigns.com/assets/problem2.jpg (screenshot)

The drop downs are now visible but it breaks the layout.

Here is the html/php:

<div class="container">
<div class="row">
    <div class="twelvecol last" id="nav">
        <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

    </div>

</div>

CSS:

#nav{background: #4b4261;
margin-bottom: 2%;
color: #f4e1c8;
 }

.nav{
width:100%;
background: #4b4261;
display:block;
float:left;
position:relative;
}

.nav ul{
list-style:none;
}

.nav li{
display:inline-block;
position:relative;
}
.nav a{
display:block;
text-decoration:none;
color:#f4e1c8;
padding:0 15px 10px 0;
font-size: 1.2em; 
font-weight:bold;
}

.nav ul ul{
display:none;
position: absolute;
left:0;
top: 100%;
float:left;
z-index:99999;
background: #c1c5cc;
}

.nav ul ul ul{
top: 30%;
left:100%;
background: #dfe1e8;
}

.nav ul ul a{
height:auto;
line-height:1em;
padding:10px;
width:130px;
}

.nav li:hover > a,.nav ul ul:hover > a{
color:#fff;

}

.nav ul li:hover > ul{
display:block;
 }

grid css:

.container {
padding-left: 20px;
padding-right: 20px;
}

.row {
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;


}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
min-height: 1px;
}

I really feel like I’m overlooking something simple here. Any ideas? Thanks!

Answer 1

You have the overflow for .row as hidden, which means, any content that extends past the borders of that element will not be shown.

Also, while you have the child ul element set as position: absolute; and z-index: 9999;, their parent elements are set to position:relative; do not have a z-index set to be above the content element. Therefore, the drop down z-index only applies to its parent ‘dimension’ (z-index level) and not to the rest of the page. This might cause a issue, but I haven’t tested it, just working from memory.