Html CSS下拉菜单未正确显示
我的css有点问题,我真的很沮丧吗? HTML:Html CSS下拉菜单未正确显示,html,css,Html,Css,我的css有点问题,我真的很沮丧吗? HTML: <div id="nav"> <ul> <li><a href="#">Home</a> <ul> <li><a href="#">More</a></li> <li><a href="#">H
<div id="nav">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">More</a></li>
<li><a href="#">Hawa</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
#nav {background: #008080;position:relative;}
#nav ul {list-style:none;display:flex;position:relative;}
#nav ul li {width: 50px;display:inline-table;padding: 10px 20px;position:relative;}
#nav ul li:hover {background:#333;}
#nav ul li:hover > ul {display: block;position:absolute;margin-left:0px;width:100%;}
#nav ul li a{text-decoration:none;font-family:Verdana;color:#fff;}
#nav ul ul {display:none;}
#nav ul ul li {background: #008080;}
我的问题是:
- 我的css下拉列表与li元素不一致
使用负边距值 我在css中做了一些更改
#nav {
background: #008080;
position:relative;
}
#nav ul {
list-style:none;
display:flex;
position:relative;
}
#nav ul li {
width: 50px;
display:inline-table;
padding: 10px 20px;
position:relative;
}
#nav ul li:hover {
background:#333;
}
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:-60px;width:100%;
}
#nav ul li a{
text-decoration:none;
font-family:Verdana;
color:#fff;
}
#nav ul ul {
display:none;
}
#nav ul ul li {
background: #008080;
}
重置CSS
*{框大小:边框框;填充:0;边距:0;}
将填充添加到锚定
而不是列表
试试这个,你的子菜单列表上有一个“填充”
#nav ul li:hover > ul {
display: block;
position:absolute;
left:0px;
width:100%;
padding-left:0px;
}
简单添加以下内容:
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:0px;
width:100%;
left: 0;/*Add this*/
padding: 0;/*Add this*/
top: 40px;/*Add this*/
}
同时更改为显示:块#nav ul li{宽度:50px;显示:块;填充:10px 20px;位置:相对;}
。检查恢复菜单
为锚添加填充,不要列出检查我的更新啊,谢谢!!但我做到了:100%:)。尽管如此,还是要感谢!!谢谢你的帮助,兄弟:)!!谢谢你,伙计,你帮了我!!
#nav ul li:hover > ul {
display: block;
position:absolute;
margin-left:0px;
width:100%;
left: 0;/*Add this*/
padding: 0;/*Add this*/
top: 40px;/*Add this*/
}