使用纯 css 和 HTML 创建菜单 [英] Create a menu using pure css and HTML
本文介绍了使用纯 css 和 HTML 创建菜单的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这样的菜单结构:
<ul class"menu">
<li>
<a>item1</a>
<ul>
<li><a>subitem1</a></li>
<li><a>subitem2</a></li>
<li><a>subitem3</a></li>
<li><a>subitem4</a></li>
<li>
<a>item2</a>
<ul class="sub-ul-2">
<li><a>subitem5</a></li>
<li><a>subitem6</a></li>
<li><a>subitem7</a></li>
<li><a>subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我的要求是,当我悬停在item1上时,subitem1,subitem2,subitem3,subitem4只需要显示,subitem5-8不需要显示.
My requirement is, when I hover on item1 then subitem1,subitem2,subitem3,subitem4 only need to display and subitem5 - 8 no need to display.
当我将鼠标悬停在 item2 上时,则只需要显示 subitem5 - 8.我怎样才能通过使用 css 来实现这一点?
When I hover on item2, then only subitem5 - 8 need to display. How can I achieve this by using css?
我试过了:
ul.menu ul{
display: none;
}
ul.menu li:hover:first-child ul {
display:block;
}
推荐答案
HTML
<ul class="menu">
<li>
item1
<ul>
<li><a href="#">subitem1</a></li>
<li><a href="#">subitem2</a></li>
<li><a href="#">subitem3</a></li>
<li><a href="#">subitem4</a></li>
<li>
item2
<ul>
<li><a href="#">subitem5</a></li>
<li><a href="#">subitem6</a></li>
<li><a href="#">subitem7</a></li>
<li><a href="#">subitem8</a></li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menu li > ul {
display:none;
}
.menu li:hover > ul {
display:block;
}
这篇关于使用纯 css 和 HTML 创建菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文