极度简单，极度压缩的下拉菜单制作

极度精简的下拉菜单编写教程

一直想把侧边栏的归档改成下拉菜单形式，一直缺乏修改代码的动力。今天看到动力火车提供的select代码，脑子一热直接复制粘贴到module.php文件里面，新生成的下拉菜单还蛮好用的，就是外观样式不好改，查了查似乎要使用Javascript脚本，这也太麻烦了。于是改用div+css写下拉菜单，这一来可太方便了。

过去没写过下拉菜单这种东西，也不懂怎么写，好在度娘上什么都有，没两下就让我搜到了一个比较简便的下拉菜单代码。剔除掉掉各种多余的代码元素，极度精简出来一个html主文件和三个css样式表层级属性，发现做这东西其实挺简单的。脑袋一热干脆来发这个被我极度精简过的div+css下拉菜单编写教程。升级版的横向滑动伸缩菜单走这边。

html主文件是用来安置下拉菜单内容的，我们将这个下拉菜单设置为一个div元素，层级就设定为“menu”，下拉菜单名称命名为“菜单”，里面的选项分别是“选项1”、“选项2”和“选项3”，用<br>标签断行（也可以用<p>标签），生成html代码：<div class="menu">菜单<br>选项1<br>选项2<br>选项3<br></div>

然后开始写menu层级的css样式表属性，这里面有五个必须属性，width、height、line-height和overflow-y。width是宽度标志，系统自动默认为100%，这个属性如果不设置就会发生满行都是菜单现象；height是高度标志，line-height是div元素内部的文字行高标志，height的高度属性和line-height一样即可，太大会暴露选项；overflow-y是滚动条溢出标志，需要设置为hidden隐藏属性，否则也会暴露选项。示例：.menu{width:60px;height:20px;line-height:20px;overflow-y:hidden;}

接下来设置.menu:hover属性。hover是鼠标移动到元素上方的动作，.menu:hover是鼠标移动到层级为menu的元素上方的意思。.menu:hover会继承.menu的所有属性，因此只需要单独强调一下height属性，将它设置为auto即可。这样一来当鼠标移动到下拉菜单上方，菜单就会自动展开露出选项：.menu:hover{height:auto;}

这样一来一个极度精简的下拉菜单就完工了。在此基础上可以加入位置、颜色、字体、背景、边框等等css属性，也可以将html中的选项制作成链接、图片等形式。

如果你已经尝试过上述代码，可能会发现这里面还存在一个小问题，那就是下拉菜单展开的同时会撑大页面。position定位标志就是为此准备的，将它设置为absolute绝对属性并加入css样式表，无论菜单收缩、展开都不会撑开页面：.menu{position:absolute;width:60px;height:20px;line-height:18px;overflow-y:hidden;}

只是position:absolute绝对定位实在是太绝对了，以至于和下方其他网页元素重叠了。因此必须设置下拉菜单background背景标志属性免得菜单文字和其他文字重叠。menu层级之外需要再包裹一个层级，设定为“box”并加入padding-bottom样式表标志属性，好让其他元素位置下移不要和下拉菜单挤在一起。

最后完成的下拉菜单代码应该是这样的：

 

<style type="text/css"><!--
.box{padding-bottom:20px;}
.menu{position:absolute;width:60px;height:20px;line-height:20px;background:#fff;overflow-y:hidden;}
.menu:hover{height:auto;}
--></style>
<div class="box"><div class="menu">菜单<br>选项1<br>选项2<br>选项3<br></div></div>
<p>看一下菜单效果</p>

你也试一下怎么样？