使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

Posted 2020-08-11

html代码：

<div class="menu-bar">
<ul>
<li>
<h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3>
<ul>
<li>
html/css从入门到精通
</li>
<li>
html5新增API
</li>
</ul>
</li>
</ul>
</div>

对应的css代码：

div.menu-bar ul ul {
display: none;
}

div.menu-bar li:hover > ul {
display: block;
}

 

移除a标签hover时的下划线