在Flexslider中导航，但是下拉列表不应该正常工作？

Question

正如您在此图片中看到的那样，当我将鼠标悬停在flexslider内的菜单上时，菜单将无法正确下拉。滑块底部结束时停止。任何人都可以帮助我超越它吗？我已经尝试将z-index添加到所有内容但仍然没有运气。也许我做错了。

以下是滑块和导航菜单的所有代码：

<div class="out-content"> 
<div class="container_12">
<div class="content " role="main"> 
<div class="flexslider">
<ul class="slides">
<li><img src="img/slider/slide1.png" alt=""></li>
<li><img src="img/slider/slide4.png" alt=""></li>
<li><img src="img/slider/slide6.png" alt=""></li>
<li><img src="img/slider/slide7.png" alt=""></li>
<li><img src="img/slider/slide3.png" alt=""></li>
<li><img src="img/slider/slide8.png" alt=""></li>
<li><img src="img/slider/slide2.png" alt=""></li>
<li><img src="img/slider/slide9.png" alt=""></li>
</ul>
</div>
<div id="slide-menu">
<p class="slide"> 
<a href="#"  class="btn-slide"></a>
</p>
<div id="panel">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Wedding Dresses</a>
<ul>
<li><a href="#">Maggi Sattaro</a></li>
<li><a href="#">Ronald Joyce</a></li>
<li><a href="#">Amanda Wyatt</a></li>
<li><a href="#">Mark Lesley</a></li>
<li><a href="#">Romantica of Devon</a></li>
<li><a href="#">"Only You" by Decorum Bridal</a></li>
</ul>
</li>
<li><a href="#">Bridesmaids</a>
<ul>
<li><a href="#">Ebony Rose</a></li>
<li><a href="#">Mark Lesley</a></li>
<li><a href="#">Romantica of Devon</a></li>
<li><a href="#">Amanda Wyatt</a></li>
<li><a href="#">Linzi Jay</a></li>
</ul>
</li>
<li><a href="#">Mens Formal Wear</a>
<ul>
<li><a href="#">Peter Posh</a></li>
<li><a href="#">Ultimate Formal Hire</a></li>
</ul>
</li>
<li><a href="">Sale</a></li>
<li><a href="">Events</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

nav {
font-family: 'cinzel', cursive;
font-style: normal;
font-size: 12px;
background: url(../img/menu-bg.png);
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
padding: 0 42px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; 
clear: both; 
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #AFAEAE;
}
nav ul li a {
display: block; 
padding: 20px 20px;
color: #FFF; 
text-decoration: none;
}
nav ul ul {
background: url(../img/menu-bg.png); 
border-radius: 0px; 
padding: 0;
position: absolute; 
top: 100%;
}
nav ul ul li {
float: none; 
border-top: 1px solid #AFAEAE;
border-bottom: 1px solid #AFAEAE;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #FFF;
font-size: 12px;
} 
nav ul ul li a:hover {
background: url(../img/menu-bg.png);
}

Answer 1

要解决此问题，请在样式表中进行以下更改

.content {
    overflow:hidden; //change this to below
    overflow:visible;
}

并添加此

nav ul ul{
    z-index:1 //added this line
}

overflow:hidde; div的{​​{1}}阻止了显示超出div大小的下拉列表。我认为上述样式应该可以解决您的问题。