Samantha Samantha - 2 months ago 6
CSS Question

Hover Submenu Getting Cut Off

I'm working on this project: http://www.livingthelighterlife.com/

The top navigation bar (Home, About, Contact, Work With Me) is giving me some difficulty. I have a hover submenu right now under the "About" section, but it is appearing under the header, for lack of a better explaination. I've messed with the z-index and that doesn't seem to be doing anything. Not quite sure what else to try.

Thanks in advance!



#top-navigation {
float: left;
}

#top-navigation ul {
list-style: none;
position: relative;
}

#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}

#top-navigation ul li {
position: relative;
float:left;
margin: 0px 10px;
}

#top-navigation ul li:hover {
background: #f6f6f6;
}

#top-navigation ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
padding: 0;
}

#top-navigation ul ul li {
float:none;
width:200px
}

#top-navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}

#top-navigation ul li:hover > ul {
display: block;
}

<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><nav id="top-navigation">
<ul>

<li>
<a href="http://www.livingthelighterlife.com/">Home</a>
</li>

<li>
<a href="/about/">About</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>

<li>
<a href="#">Contact</a>
</li>

<li>
<a href="#">Work With Me</a>
</li>

</ul>
</nav></div>
</div></section>
</div>




Answer

check the header div with class .before-header, Do the following change:

.before-header {
    z-index: 500;
    background: #6d5d68;
    clear: both;
    /* overflow: hidden; */
    padding: 7px 0;
    text-align: center;
    font-family: 'Arquitecta-Medium', 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
}