子菜单不显示（出现在标题下）

Question

项目：lightertaste.com

顶部菜单包含About，Nutrition＆amp; amp;健身和资源，但它没有正确显示。似乎隐藏在菜单下。

希望有人可以帮我纠正。谢谢！

<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap">			<div class="textwidget"><div id="top-navigation">
<table><tr><td>

<nav id="top-navigation">
<ul>

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

<li>
<a href="/about/">About</a>
     <ul>
     <li><a href="/about/">About</a></li>
     <li><a href="/philosophy/">Philosophy</a></li>
     <li><a href="/faq/">FAQ</a></li>
     <li><a href="/work-with-me/">Work With Me</a></li>
     <li><a href="/contact/">Contact</a></li>
     </ul>
</li>

<li>
<a href="/recipe-index/">Recipe Index</a>
</li>

<li>
<a href="#">Nutrition & Fitness</a>
     <ul>
     <li><a href="#">Meal Plans</a></li>
     <li><a href="#">Meal Prep</a></li>
     <li><a href="#">Workouts</a></li>
     </ul>
</li>

<li>
<a href="#">Resources</a>
     <ul>
     <li><a href="#">Start a Blog</a></li>
     <li><a href="#">My Blogroll</a></li>
     <li><a href="#">Thank Yous</a></li>
     </ul>
</li>

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

</ul>
</nav>

</td><td>

<form class="search-top-form" method="get" action="http://www.lightertaste.com/">

<input class="search-top-input" type="text" name="s" id="s" value="" placeholder="Search" />

<input class="search-top-submit" type="submit" name="submit" id="searchsubmit" value=" " />
</form>

</td></tr></table>
</div>



<div class="top-subscribe-social">
<span class="social-top">

<a target="_blank" class="icon-rss top-social" href="#"></a>

<a target="_blank" class="icon-facebook top-social" href="#"></a>

<a target="_blank" class="icon-pinterest top-social" href="https://www.pinterest.com/lightertaste"></a>

<a target="_blank" class="icon-instagram top-social" href="https://www.instagram.com/lightertaste"></a>

<a target="_blank" class="icon-twitter top-social" href="https://twitter.com/lightertaste"></a>

<a target="_blank" class="icon-heart top-social" href="#"></a>

</span>
</div></div>
		</div>

.before-header {
	background: #3d4646 !important;
	clear: both;
	padding: 5px !important;
	text-align: center;

	font-family: 'dosis-regular' !important;
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: lowercase;
}

.before-header .widget {
	margin: 0 auto;
	max-width: 1000px !important;
}

/* Top Navigation
--------------------------------------------- */

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

#top-navigation ul a {
	display: block;
	color: #ffffff !important;
	font-weight: normal !important;
	text-decoration: none;
}

#top-navigation ul a:hover {
	color: #68a29c !important;
}

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

#top-navigation ul li:first-child {
	margin-left: 0px;
}

#top-navigation ul li:hover {
	color: #79a7a5;
}

#top-navigation ul ul:before {
	content: '';
	display: block;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 11px solid #68a29c;
}

#top-navigation ul ul {
	display: none;
	position: absolute;
	margin-top: -2px;
	left: 50%;
	transform: translateX(-50%);
	width: 150px;
}

#top-navigation ul ul li {
	float: none;
	margin: 0px;
}

#top-navigation ul ul a {
	display: block;
	background: #68a29c;
	padding: 10px;
	font-size: 12px;
}

#top-navigation ul ul a:hover {
	background: #3d4646;
	color: #ffffff;
}

#top-navigation ul ul ul {
	top: 0;
	left: 100%;
}

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

Answer 1

解决。在另一个区域注意到此代码：

/*
Top Ad
---------------------------------------------------------------------------------------------------- */

.before-header {
	background: #f5f5f5;
	clear: both;
	overflow: hidden;
	padding: 10px 0;
	text-align: center;
}

.before-header img,
.before-header iframe {
	display: block;
	margin: 0 auto;
}

.before-header .widget {
	margin: 0 auto;
	max-width: 1100px;
}