今天给大家分享一个纯html+css实现的下拉菜单。在此声明一点，源码并非出自本人之手，是同项目组一兄弟PLUTO写的。好东西嘛，所以果断拿出来和大家分享。如果有更好的想法或者建议，一定记得留言哦！好了，直接上代码：(IE6请直接越过)
<!DOCTYPE html>
<html lang=”en”>
<head>
<!– create by pluto on 13-12-6 –>
<title>MENU</title>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
<meta name=”renderer” content=”webkit”>
<style type=”text/css”>
body{font:14px/20px normal “Arial”, sans-serif;background:#f0f0f0;}
ul{list-style:none;margin: 0;padding: 0;}
.main{width:960px;margin:0 auto;}
.clearfix{*zoom: 1;}
.clearfix:before, .clearfix:after{display:table;content: “”;line-height: 0;}
.clearfix:after{clear:both;}
.menu{margin-top: 30px;}
ul > li > a{white-space: nowrap;font-weight:bold;display: block;padding:7px 15px;color:#000;text-decoration: none;background-color:#222;text-shadow:0 0 1px rgba(100,255,255,.7), 0 0 20px rgba(255,255,255,0.3);transition:color 0.4s ease;}
ul > li > a:hover{color:#ddd;}
.menu > li{float: left;position: relative;margin-right: 2px;}
.menu > li > a{border-radius:15px;box-shadow:1px 2px 3px #222;}
.submenu > div{position: absolute;display: none;min-width:150px;padding:7px 0 0;}
.submenu:hover > div{display: block;}
.submenu ul{position:relative;border-radius:15px;box-shadow:0 0 0 rgba(0,255,255,.9);}
.submenu ul:before{display: block;content: “”;width:0;position:absolute;top:-14px;left:20px;border-style:solid;border-width:7px;border-color:transparent;border-bottom-color:#222;}
.submenu ul > li:first-child > a{border-radius:5px 5px 0 0;}
.submenu ul > li:last-child > a{border-radius:0 0 5px 5px;}
</style>
</head>
<body>
<div class=”main”>
<ul class=”menu clearfix”>
<li class=”submenu”>
<a href=””>MENU1</a>
<div>
<ul>
<li><a href=””>SUBMENU 01</a></li>
<li><a href=””>SUBMENU 02</a></li>
<li><a href=””>SUBMENU 03</a></li>
</ul>
</div>
</li>
<li class=”submenu”>
<a href=””>MENU2</a>
<div>
<ul>
<li><a href=””>SUBMENU 04</a></li>
<li><a href=””>SUBMENU 05</a></li>
<li><a href=””>SUBMENU 06</a></li>
</ul>
</div>
</li>
<li class=”submenu”>
<a href=””>MENU3</a>
<div>
<ul>
<li><a href=””>SUBMENU 07</a></li>
<li><a href=””>SUBMENU 08</a></li>
<li><a href=””>SUBMENU 09</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
// 注意：此效果低版本浏览器慎用！
转载请注明出处：http://www.cnblogs.com/callmesummer/p/3942405.html
拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：
