CSS下拉菜单显示问题
我正在一个项目上工作,我被分配显示一个嵌套的菜单,我的意思是下拉菜单,但我不知道我在这里做错了什么。谁能帮我吗 ?CSS下拉菜单显示问题
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
项目不正确每个家长里下显示。我需要一个解决方案和进一步的代码检查,我有一个jsFiddle链接。
尝试添加显示:块;你的*悬停类
#nav ul li a:hover {
background: #a1a1a1;
display:block;
}
我碰到这个来给你
我有你的问题的解决方案可能是有用的。你必须做在你的CSS表的一些变化。我添加新的内容在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%;
}
#nav ul ul li:hover > ul{
position: absolute;
margin-left:100px;
top:0px;
display: block;
width: 100%;)/* CSS Document */
好吧,帮了我很多,但现在看看这个问题,当我删除'a'中的边距并试图给它100%的宽度时 - > http://jsfiddle.net/60L57ofg/1/帮我 ? – Naveen 2015-02-08 08:34:06
你不能指定100%witdh来锚定标记.....它会根据你的浏览器工作....你必须指定相同的宽度和高度,你指定给李 – 2015-02-08 09:45:49
是的我做到了,但现在的问题是更多的看看http://jsfiddle.net/60L57ofg/1/! – Naveen 2015-02-08 08:37:08