大佬教程收集整理的这篇文章主要介绍了html – 带子菜单的纯css垂直菜单，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我希望我的子菜单弹出窗口显示在一个不是li属性左侧的10px,就像在互联网上找到的大多数示例一样.我也在寻找最简单,纯粹的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>
我的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;}
当我将一个HTML锚点而不是li和10px悬停在单击的锚点左侧时,如何设置它以便弹出子级别菜单？
谢谢.
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
#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; }
以上是大佬教程为你收集整理的html – 带子菜单的纯css垂直菜单全部内容，希望文章能够帮你解决html – 带子菜单的纯css垂直菜单所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。