悬停子菜单被切断

Question

我正在开展这个项目：http://www.livingthelighterlife.com/

顶部导航栏（主页，关于，联系，与我合作）给了我一些困难。我现在在“关于”部分下面有一个悬停子菜单，但由于缺乏更好的解释，它出现在标题下面。我搞砸了z-index，但似乎没有做任何事情。不太清楚还有什么可以尝试。

提前致谢！

#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 1

在此类.before-header的标题部分中，您正在使用溢出隐藏。这就是您的子菜单无法显示的原因。您不能在要使用子菜单的地方使用隐藏溢出。只需删除隐藏的溢出。

Answer 2

使用div class检查标题 .before-header，请执行以下更改：

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