dmenu纯CSS 2下拉菜单可兼容IE6+、chrome等主流浏览器

2014-04-10

浏览 loading

通过使用CSS2+CSS3制作轻巧炫酷的下拉菜单

下拉菜单是一个站点非常常见的组件，一般通过js实现，但是如果我们仅需要一个下拉菜单那么就可以用CSS制作，除了js本身会影响网页速度如果浏览器关闭javascript还会导致下拉菜单失效。而且减少js还能打开页面时减少请求让页面更快的打开。

实现原理

堃埜主要通过:hover来实现纯CSS下拉的效果，如果页面有多个不同下拉可以使用行内样式或使用不同class定义多个个性下拉。

像Javascript下拉菜单一样炫酷

可以通过添加CSS3让css下拉菜单和javascript下拉菜单一样有炫酷的弹出收拢效果

CSS代码片段

.dmenu{ float:left;  position:relative; z-index:1; } 
li:hover.dmenu .dmenu-main, div:hover.dmenu .dmenu-main {display: block;}
.dmenu-main{ display:none;   position:absolute; right:-1px; z-index:10; border:1px solid #E6E4E3; border-top:0;  background:#fff;  top:26px; width:53px; border: 1px solid #bebebe;border-top: none; -moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);box-shadow: 0 2px 4px rgba(0,0,0,.2);}    
.dmenu-main li{ text-align:center; padding:0px; margin-bottom:-1px; float: none !important;display: block;border-right: none !important;}    
.dmenu-main li a{ display:block;  border-bottom:1px solid #E6E4E3; padding:0px 12px 0px 12px; text-align: left; height:26px; line-height:26px; color:#666 !important; text-shadow:none;}
.dmenu-main li a:hover{ background: #F2F2F2;}

CSS兼容IE6代码片段

因为IE6对:hover的兼容并不完善，如果需要一个htc文件让IE6下让任意标签兼容:hover。以下CSS只会在IE6下生效。
hec文件请保留到本地，下述地址不保证长期有效！：去百度云下载“ie6hover.htc”

1	body { _behavior:url("http://yijile.qiniudn.com/usr/themes/yile/images/ie6hover.htc");}

HTML代码片段之UL列表版

<ul>
<li class="dmenu"><a href="#">分类<span>︾</span></a>
<ul class="dmenu-main" style="top:30px; width:119px;"> 
<li><a href="https://yijile.com/notes/">前端/39</a></li>
<li><a href="https://yijile.com/app/">应用/10</a></li>
<li><a href="https://yijile.com/diary/">记录/51</a></li>
<li><a href="https://yijile.com/news/">关注/182</a></li>
<li><a href="https://yijile.com/work/">作业/3</a></li>
<li><a href="https://yijile.com/book/">读书/1</a></li>
</ul>
</li>
</ul>

HTML代码片段之DIV容器版

<ul>
<div class="dmenu"><a href="#">分类<span>︾</span></a>
<div class="dmenu-main" style="top:30px; width:119px;"> 
<a href="https://yijile.com/notes/">前端/39</a>
<a href="https://yijile.com/app/">应用/10</a>
<a href="https://yijile.com/diary/">记录/51</a>
<a href="https://yijile.com/news/">关注/182</a>
<a href="https://yijile.com/work/">作业/3</a>
<a href="https://yijile.com/book/">读书/1</a>
</div>
</div>

dmenu代码片段是从堃埜博客以及乐中提取的，没有单独测试，所以可能会有一些瑕疵，对css稍加完善便可。堃埜20140410

e532a729

Relay Tips: 一极乐（ https://yijile.com/log/370/ ）