Html 带子菜单的纯 css 垂直菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10477184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
pure css vertical menu with submenu
提问by Marco
I did my research and was able to replicate what I'm looking for, well kind of--I just need help with a more specific vertical, pure CSS, menu.
我做了我的研究，并且能够复制我正在寻找的东西，很好——我只需要一个更具体的垂直、纯 CSS、菜单的帮助。
I want my sub-menu popup to appear 10px to the left of the a not the liattribute like most example found on the internet. I'm also looking for the most simple, pure CSS, type of menu--Nothing fancy.
我希望我的子菜单弹出窗口出现在 a 左侧 10px 的位置，而不是li像在 Internet 上找到的大多数示例那样的属性。我也在寻找最简单、纯 CSS 的菜单类型——没什么特别的。
Here's what I've done so far:
这是我到目前为止所做的：
<div id="nav">
<ul class="top-level">
<li><a href="#">This is a long text</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact me here</a></li>
<li><a href="#">Help</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
</ul>
my css:
我的CSS：
#nav {border:1px solid cyan;}
/* top level menu */
#nav ul.top-level {border:1px solid red;}
#nav ul.top-level li {position:relative;}
/* sub level menu */
#nav ul.sub-level {border:1px solid yellow;}
#nav ul.sub-level {display:none;} /* hide */
/* hover the sub menu*/
#nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}
How do I make it so the sub level menu pops up when I hover the aHTML anchor, not the li, and 10px to the left of the clicked aanchor?
Thanks.
当我将鼠标悬停在aHTML 锚点而不是li, 和 10px 到单击的a锚点左侧时，如何使子级别菜单弹出？谢谢。
回答by Jhilom
Try this one and I think it will help
试试这个，我认为它会有所帮助
HTML
HTML
<div id="nav">
<ul class="top-level">
<li><a href="#">This is a long text</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact me here</a></li>
<li><a href="#">Help</a>
<ul class="sub-level">
<li><a href="#">Sub Menu Item 1</a></li>
<li><a href="#">Sub Menu Item 2</a></li>
<li><a href="#">Sub Menu Item 3</a></li>
</ul>
</li>
</ul>
</div>
?
?
CSS
CSS
#nav {font-size:0.75em; width:150px;}
#nav ul {margin:0px; padding:0px;}
#nav li {list-style: none;}
ul.top-level {background:#FFFFFF;}
ul.top-level li {
border: #FF0000 solid;
border-width: 1px;
}
#nav ul.sub-level {border:1px solid yellow;}
#nav a {
color: #000000;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#nav a:hover{
text-decoration:underline;
}
#nav li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#nav .sub-level {
background: #FFFFFF;
}
