html5中三级下拉菜单实现案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级下拉菜单</title>
<style>
div{margin:30px 180px;}
ul{list-style:none;padding:0px;}
ul li{float:left;position:relative;}
ul li a{text-decoration:none;
background:#a40000;
display:block;
line-height:40px;
text-align:center;
padding:0px 10px;
color:white;
margin-right:1px;
}
ul li a:hover{background:#f90;}
ul li ul li,ul li ul li ul li{float:none;margin-top:1px;}
html下拉菜单的制作方法ul li ul li ul{position:absolute;
left:100%;
top:-1px;
width:100px;
}
ul li ul {display:none;}
ul li:hover ul{display:block;}
ul li:hover ul li ul{display:none;}
ul li ul li:hover ul{display:block;}
</style>
</head>
<body>
<div>
<ul>
<li ><a href="#">学校概况</a></li>
<li ><a href="#">管理机构</a></li>
<li ><a href="#">学院设置</a>
<ul>
<li ><a href="#">电⽓学院>></a>
<ul>
<li ><a href="#">电⼦系</a>
<li ><a href="#">测控系</a>
<li ><a href="#">电⼒系</a>
<li ><a href="#">信息系</a>
<li ><a href="#">信息系</a>
<li ><a href="#">⾃动化系</a>                        </ul>
</li>
<li ><a href="#">材料学院</a></li>
<li ><a href="#">测绘学院</a></li>
<li ><a href="#">⼟⽊学院>></a>                        <ul>
<li ><a href="#">地下⼯程系</a>                            <li ><a href="#">岩⼟⼯程系</a>                            <li ><a href="#">建筑⼯程系</a>                            <li ><a href="#">⼯程⼒学系</a>                            <li ><a href="#">⼯程管理系</a>                        </ul>
</li>
<li ><a href="#">安全学院</a></li>
</ul>
</li>
<li ><a href="#">科学研究</a></li>
<li ><a href="#">招⽣就业</a></li>
</ul>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。