本文介绍了一种使用纯CSS实现的下拉菜单效果。通过:hover伪类触发子菜单显示，适用于简单的导航栏制作。该示例包含三个可下拉的菜单项，每个菜单项在鼠标悬停时会展开子菜单。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css下拉</title>
<style>
body,ul,li{ margin:0; padding:0;}
.box{ width:400px; margin:50px auto;}
.box li{ list-style:none; cursor:pointer;}
.box ul{ float:left; width:100px; margin-right:10px; text-align:center; height:30px; line-height:30px; background:#999;}
.box ul li ul{ display:none; width:100px; text-align:center; }
.box li ul li{ background:#CCC; height:30px; line-height:30px;}
.box li:hover ul{ display:block;}
</style>
</head>
<body>
<div class="box">
<ul>
<li id="box1"><a href="#" target="_blank">平面设计</a>
<ul id="list_1">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
<ul>
<li id="box2"><a href="#" target="_blank">平面设计</a>
<ul id="list_2">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
<ul>
<li id="box3"><a href="#" target="_blank">平面设计</a>
<ul id="list_3">
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
<li><a href="#" target="_blank">平面设计</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
转载于:https://www.cnblogs.com/su1637/p/8256842.html
扫一扫
3581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
