首页 / CSS / 纯css实现下拉菜单
纯css实现下拉菜单
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了纯css实现下拉菜单，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2922字，纯文字阅读大概需要5分钟。
内容图文
今天给大家分享一个纯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
拿出手机，打开支付宝扫一扫，再小的力量，也是一种支持：
原文：http://www.cnblogs.com/callmesummer/p/3942405.html
内容总结
以上是互联网集市为您收集整理的纯css实现下拉菜单全部内容，希望文章能够帮你解决纯css实现下拉菜单所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。