当鼠标悬停在包围div上时,CSS下拉菜单不会显示
问题描述:
我正在研究一个简单的css下拉菜单,当我将鼠标悬停在列表上时,下拉菜单显示,但是当我的鼠标移动到“#head”封套div列表关闭。当鼠标悬停在包围div上时,CSS下拉菜单不会显示
头div是包装菜单和我的标志和搜索栏。 内容div包装我的所有内容。
当有下面的“头”的div内容,说一个“内容”分区,然后在下拉列表中显示,直到我将光标移动超越了“头”的div
div#content{
display:block;
width:972;
float:none;
position:relative;
}
#top_menu{
float:right;
text-align: left;
width: 505px;
padding: 5px 0 0 0;
display: inline-block;
}
#top_menu ul{
list-style-type:none;
float:right;
}
#top_menu ul li ul{
display:none;
}
#top_menu ul li{
float: left;
padding: 0 0 0 14px;
margin: 0;
width: auto;
}
#top_menu ul li:hover ul{
display:block;
position:absolute;
}
#top_menu ul li:hover ul li{
clear: left;
}
#top_menu a{
display:block;
}
<div id="head">
<div id = "top_menu">
<ul class="nav">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a>
<ul>
<li><a href="1.php">1</a></li>
<li><a href="2.php">2</a></li>
<li><a href="3.php">3</a></li>
<li><a href="4.php">4</a></li>
<li><a href="5.php">5</a></li>
<li><a href="6.php">6</a></li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="search">
<form action="search.php" method="post">
<input type="text" maxlength="30" width="40" />
<input type="submit" value="submit" />
</form>
</div>
</div>
答
确定...我通过添加一个z-index来修复它,结果在div div下面的content div覆盖了下拉框。所以在CSS中,我只是补充说:z-index:1000,然后它的工作。谢谢大家。
+0
找到修复的好工作。标记你的答案是正确的。 –
嗨,#头元素的CSS是什么,你可以得到一个副本上jsFiddle看? – MyStream
其实你的代码工作正常:http://jsfiddle.net/2tRUt/3/ – Samich