我进行了调查并成功复制了我要寻找的内容,但是需要帮助实现一个更具体、纯CSS、垂直菜单。
我希望我的子菜单弹出在链接(a
标签)左侧10像素,而不是像大多数在互联网上找到的例子一样弹出在 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>
我的 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锚点a
上时弹出,而不是在li
上,且相对于点击的a
向左10px?
谢谢。