我正在尝试使用 CSS 添加子菜单。当我将鼠标悬停在“顶级菜单”链接上时,我希望出现一个子菜单。请参阅 here 处的代码
<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>
非常感谢任何帮助。谢谢
最佳答案
Demo 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;
}
关于html - 在html中使用css添加子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22382367/