访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它不仅实现了网页下拉式菜单,省去了很多点击的麻烦,还由此展示了一种新颖的网页设计方法.那么我们是否也能在工作中或主页上实现这一美妙的效果呢？带着这一疑问，笔者在实践过程中逐渐掌握了这一方法。尽管没有Microsoft主页上的完美, 毕竟还是达到了异工同曲之妙.
要做一个下拉式菜单，首先要定义一个格式化的可定位的对象。这个对象不仅可以具有普通对象具备的任何特征，还必须可以重叠在该网页的任何其他对象之上。
我们知道, 如果要在网页之中的任何对象上再放置一个对象，除了使用Java小程序外，还可以使用css 技术。如果使用Java小程序，不外乎是建立在Panel对象和动态生成一幅Image基础之上来完成的 ，这样做不仅烦琐，增加了网页建设的难度，更重要的是延长了访问者等待的时间。我们希望网页精巧、内容丰富而又不希望它过于臃肿、加载速度快，那么css就是我们等待已久的利器。
有了css, 网页设计即可变得轻松起来。
我们利用 css 格式化模型定位一个具有填充属性的通用类：.菜单类名 {padding: 填充宽度} 然后对我们要使用的每一个菜单进行如下标记：
#名称 {
position: 可以是绝对定位 absolute, 相对定位 relative 和静
态定位 static
top: 距顶位置
left: 距左位置
width: 菜单宽度
height: 菜单高度
color: 菜单颜色
border: 菜单体型：不画边框 none,实线 solid,双线 double,
3D外嵌 outset
vertical-align: 垂直调整
visibility: 可视性: 可见(IE 为 visible, Netscape 为show)
隐藏(IE 为 hidden, Netscape 为hide)
注意：这里的位置和高度单位有cm(绝对单位)、px(像素单位)、em(以M或H字母的高度为比例)、%(百分比单位),读者可根据自己的需要来决定。
有了这些“容器”，我们还得把所需的菜单项 MenuItem 填到里面去，在定义每一个菜单栏时，除了原料仅仅是 HTML 4.0 的内容外，还要把菜单栏的内容与鼠标的动作联系起来，一个是鼠标停留时onMouseover，另一个是鼠标离开时 onMouseout。
通用定义如下：
＜a href="鼠标点击到那里去" onMouseover="显示" onMouseover="隐藏"＞
菜单栏内容＜/a＞＜br＞
在菜单栏都完成之后，用 SPAN 把这些元素编组起来? 为菜单对象这个容器也要感应鼠标的停留和离开时的事件，所以在编组时也要加以考虑：
＜span id=所属菜单 onMouseover="显示" onMouseout="隐藏"＞
＜div class=菜单类＞
＜font face="菜单字体" color="颜色" size=2＞
OK,一个层次分明的菜单就搞定了，我们可以用边框、字体和颜色把每个菜单都风格化，以边框为例。
如果要把菜单立体化，只须在菜单(border)属性里加上: ＜粗细＞ ＜长度＞ ＜颜色＞ ＜三维效果＞ 即可：
...{padding: 2pt} #TestMenu1{border:thin soild outset; position:
absolute;...
就成为一个立体的细边菜单。
最后，我们期望菜单是实时建立的，所以借助了 JavaScript 的 document.write 函数，在输出 HTML 代码时，别忘了通知浏览器你使用了css:
document.write (＜STYLE type="text/css"＞...
以上是简单的单层菜单，加以适当的扩充，就可以做成一个多层的，可以在菜单栏里显示图标、音乐、滤镜效果、透明和3D样式的色彩绚丽的折叠式菜单！
以下是原代码，载入浏览器时，鼠标在“下拉菜单演示”、“编译器”和“许可说明” 停靠时，便会出现下拉式菜单。
若不特别说明, 均为 640 X 480 的分辨率下 IE4、IE5 通过。
