Html 带子菜单的纯css垂直菜单
我做了研究,能够复制我想要的东西,我只是需要一个更具体的垂直的,纯CSS菜单的帮助 我希望我的子菜单弹出窗口显示在a的左侧10px,而不是像internet上的大多数示例一样显示Html 带子菜单的纯css垂直菜单,html,css,menu,Html,Css,Menu,我做了研究,能够复制我想要的东西,我只是需要一个更具体的垂直的,纯CSS菜单的帮助 我希望我的子菜单弹出窗口显示在a的左侧10px,而不是像internet上的大多数示例一样显示li属性。我也在寻找最简单、纯CSS的菜单类型——没有什么特别的 以下是我迄今为止所做的工作: <div id="nav"> <ul class="top-level"> <li><a href="#">This is a long text<
li
属性。我也在寻找最简单、纯CSS的菜单类型——没有什么特别的
以下是我迄今为止所做的工作:
<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>
当我悬停a
HTML锚定,而不是li
,并在单击的a
锚定的左侧10px时,如何使子级别菜单弹出?
谢谢。试试这个,我想它会有帮助的 HTML
纯CSS无法做到这一点,必须使用JS。虽然CSS4也有可能。。。还有很长的路要走。当鼠标悬停在li上时,打开菜单并没有什么问题,您可以将锚定设置为li的精确高度/宽度,并且不会有太大的差异。
#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;}
<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>
#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;
}