gpt4 book ai didi

html - 悬停后,下拉菜单无法在 Microsoft Edge 中正确隐藏

转载 作者:行者123 更新时间:2023-11-28 06:24:10 25 4
gpt4 key购买 nike

我正在学习如何制作带下拉菜单的导航栏。这适用于 Firefox 和 Chrome,但不适用于 Edge。问题是,一旦鼠标悬停在下拉菜单上时,当鼠标移动并且是时候显示:无时,您仍然可以看到一小部分底部伸出下拉菜单曾是。仅当 ul float 时才会出现这种情况。

我删除了很多 css 以保留主要必要的内容,但包括了整个 html,以防有人想复制并粘贴到文件中查看。我想知道这是我做错了什么,还是 Edge 中的错误,如果有人能告诉我如何防止这种情况发生。

<html>
<head>
<style>
.right {
float: right;
}

.nav {
background-color: #444;
}

.nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav li {
font-size: 1.1em;
display: inline-block;
}

.nav .dropdown {
position: absolute;
display: none;
background-color: #444;
font-size: 0.9em;
}

.nav .dropdown li {
display: block;
}

.nav li:hover ul {
display: block;
}

.nav a {
text-decoration: none;
color: #fff;
display: block;
}

.nav a {
padding: 15px 25px 15px 25px;
}
</style>

</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li class="right"><a href="#">Your...</a>
<ul class="dropdown">
<li><a href="#">Profile</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Songs</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

最佳答案

我可能仓促发布了这个问题。我找到了一种通过向导航栏添加边框来隐藏问题的方法。

 .nav {
background-color: #444;
border-bottom: solid #444 thin;
}

关于html - 悬停后,下拉菜单无法在 Microsoft Edge 中正确隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35378683/

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