gpt4 book ai didi

当鼠标悬停在包装 div 之外时,CSS 下拉菜单不会显示

转载 作者:行者123 更新时间:2023-11-28 14:27:56 25 4
gpt4 key购买 nike

我正在开发一个简单的 css 下拉菜单,当我将鼠标悬停在列表上时,会显示下拉菜单,但是当我的鼠标移到“#head”包装器 div 之外时,列表会关闭。

head div 包含菜单、我的 Logo 和搜索栏。content div 包装了我所有的内容。

当“head”div 下方有内容时,说另一个“content”div,然后显示下拉列表,直到我将光标移到“head”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 来修复它,结果是附加在 head div 下方的内容 div 覆盖了下拉框。所以在 css 中,我只是添加了:z-index:1000,然后它起作用了。谢谢大家。

关于当鼠标悬停在包装 div 之外时,CSS 下拉菜单不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7705012/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com