不用JavaScript和js框架也可以做下拉菜单

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>测试效果</title>

</head>
<body>
<style>
<--

*{margin:0px;padding:0px;}
.uk{width:500px;height:20px;background-color:#666;}
.uk li{float:left;width:80px;height:20px;background-color:#CCC; list-style:none;}
.uk li ul{ display:none;}
.uk li:hover ul{display:block;}

 
-->
</style>
 
<ul class="uk">
<li><a href="javascript:void(0);">123</a>
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</li>
<li><a href="javascript:void(0);">123</a>
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>

</li>
<li><a href="javascript:void(0);">123</a>
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</li>
<li><a href="javascript:void(0);">123</a>
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</li>
<li><a href="javascript:void(0);">123</a>
<ul>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
<li>aaaaaaaaaa</li>
</ul>
</li>
</ul>
 
</body>
</html>

你可能感兴趣的:(不用JavaScript和js框架也可以做下拉菜单)