gpt4 book ai didi

html - CSS下拉菜单显示问题

转载 作者:行者123 更新时间:2023-11-28 12:32:23 24 4
gpt4 key购买 nike

我正在做一个元素,我被分配显示一个嵌套菜单,我的意思是下拉菜单,但我不知道我在这里做错了什么。谁能帮帮我?

HTML

<div id="nav">
<ul>
<li><a href="#">Menu Num 1</a></li>
<li><a href="#">Menu Num 2</a>
<ul>
<li><a href="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a>
<ul>
<li><a href="#">Sub Sub Menu 2.3.1</a></li>
<li><a href="#">Sub Sub Menu 2.3.2</a></li>
<li><a href="#">Sub Sub Menu 2.3.3</a></li>
<li><a href="#">Sub Sub Menu 2.3.4</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2.4</a></li>
</ul>
</li>
<li><a href="#">Menu Num 3</a></li>
<li><a href="#">Menu Num 4</a></li>
</ul>
</div>

CSS

* {
margin: 0px;
padding: 0px;
}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute;
display: block;
width: 100%;
}

我唯一的问题是 li 元素没有在每个父 li 下正确显示。我需要一个解决方案,为了进一步检查代码,我有一个 jsFiddle链接。

最佳答案

我有一个解决你问题的方法。你必须在你的 css 表中做一些更改。我在 css 表中的内容上添加了一个新 block ,它可以帮助你解决你的问题。

* {
margin: 0px;
padding: 0px;}
#nav ul {
list-style-type: none;
font-size: 0px;
}
#nav ul li {
display: inline-block;
position: relative;
}
#nav ul li a {
padding: 10px;
display: block;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
border: 1px solid #008080;
margin: 5px;
}
#nav ul li a:hover {
background: #a1a1a1;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul{
position: absolute;
display: block;
width: 100%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */

关于html - CSS下拉菜单显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28391709/

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