html – 带子菜单的纯css垂直菜单

概述我做了我的研究,并能够复制我正在寻找的东西,很好 – 我只需要一个更具体的垂直,纯CSS,菜单的帮助. 我希望我的子菜单d出窗口显示在一个不是li属性左侧的10px,就像在互联网上找到的大多数示例一样.我也在寻找最简单,纯粹的CSS菜单 – 没什么特别的. 这是我到目前为止所做的： <div id="nav"> <ul class="top-level"> <li><a h 我做了我的研究,并能够复制我正在寻找的东西,很好 – 我只需要一个更具体的垂直,纯CSS,菜单的帮助.

我希望我的子菜单d出窗口显示在一个不是li属性左侧的10px,就像在互联网上找到的大多数示例一样.我也在寻找最简单,纯粹的CSS菜单 – 没什么特别的.

这是我到目前为止所做的：

<div ID="nav">    <ul >        <li><a href="#">This is a long text</a>            <ul >                <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 >                <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悬停在单击的锚点左侧时,如何设置它以便d出子级别菜单？
谢谢.

解决方法 尝试这个,我认为这将有所帮助

HTML

<div ID="nav">    <ul >        <li><a href="#">This is a long text</a>            <ul >                <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 >                <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垂直菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。