使用html中的css添加子菜单
使用html中的css添加子菜单
提问于 2014-03-13 14:50:42
我试图添加一个使用css的子菜单。当我将鼠标悬停在“顶部菜单”链接上时，我希望出现一个子菜单。参见这里的代码
<div id="navbar"> <span class="navbutton">
<a id="button-1" href="#">Shop</a>
</span>
<span class="navbutton">
<a href="#">
Test1</a>
</span>
<span class="navbutton"><a id="button-3" href="#">Top Menu</a>
</span>
<span class="navbutton"><a id="button-4" href="#">Test1</a>
</span>
<a class="linefreak"></a><a class="linefreak"></a>
<span class="navbutton"><a id="button-5" href="#">Test2</a>
</span>
</div>任何帮助都是非常感谢的。谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-03-13 14:53:53
演示Fiddle
下面应该让您开始-注意，您可能更好地使用列表(ul，li)来进行这种类型的设置。
HTML
<ul>
<li>Shop</li>
<li>Test1</li>
<li>Top Menu
<ul>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
<li>Sub Item</li>
</ul>
</li>
<li>Test1</li>
<li>Test2</li>
</ul>CSS
ul {
list-style:none;
background:green;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
padding:10px 10px;
}
ul li ul {
display:none;
position:absolute;
}
ul li ul li {
display:block;
}
ul li:hover ul {
display:block;
}Stack Overflow用户
发布于 2014-03-13 14:59:19
SW4是对的。作为你的例子，小提琴：
http://jsfiddle.net/fm7Ct/4/
.navbutton:hover #button-3+.submenu{
display:inline;
}
.submenu{
display:none;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22382367
复制相关文章
相似问题
腾讯云开发者
