利用css+div制作下拉导航菜单解读
近两日上教育云空间，看了一下一些老师建立的名师工作室的情况，除学习到很多以前没接触过的内容外，还特别留意到陈克斌、徐金志两位的名师工作室上的菜单栏上都有下拉子菜单，其实如果用软件设计，这并没什么值得大惊小怪的，可这教育云空间是不允许js代码的，那这菜单是怎么设计的呢？有些好奇与疑问，难道是直接利用纯css+div制作，带着疑问我上网查了一下在静态html环境下确实可利用div+css制作下拉菜单，有了目标就开始有些想法了，其实下拉菜单就像列表样，只不过是两部分组成，一个显性显示，一个交互式显示，有了这思路，经过一到两小时琢磨，基本制作出了动态下拉菜单的雏形，现公布如下，有兴趣的老师可参考一下，因是新手，不当之处请高手指正：
效果图：
图片可能太小，不便观看，可进入我空间进行操作体验；现就其代码并功能解释如下，方便大家阅读指正：
代码如下：
body{ font-family:Arial,宋体;} --------主体的字体风格
ul,li {list-style:none;padding:0px;margin:0px;}
###menu{ padding-left:15px; height:38px; line-height:38px; width:700px; background:javascript:void(0);000380;}（顶层显示菜单的宽高总长及背景等常用参数）上图中蓝色部分
###menunav li a{color:javascript:void(0);FFF; text-decoration:none;}
###menunav li{ list-style:none; float:left; width:140px; text-align:center;} 文字的原始颜色宽度风格等
###menunav li ul a:hover{ color:javascript:void(0);ff0020;}下拉列表中鼠标移上时的字体颜色变换（如上图白字变为红色）
###menunav li:hover{position: relative;z-index: 100;}
###menunav li ul{ position:absolute; left:-999px; top:-999px;}
###menunav:hover ul{ display:block; top:0; left:0; position:relative;}以上三行表示显示菜单与下拉菜单位置下拉移动的距离及当鼠标移上显示菜单如有下拉菜单项两者间的位置关系及同时让下拉菜单部分显示等
###menunav :hover ul li a{border-top: 1px dotted javascript:void(0);e5e3e3;padding-left:20px;padding-right:20px;width: 7em;display: block;height: 28px;line-height: 28px;background: none;white-space: nowrap;float: none;overflow: hidden;background:javascript:void(0);000000; width:140px;text-align:center; padding:5px;}（下拉菜单部分的属性设置如分隔线下拉项的宽高下拉菜单的背景，文本占用宽度及对齐方式等属性还有离开下拉菜单后是否隐藏等设置）
------------------------菜单列表的主体设置（这部分相对简单，主要以列表形式来展现）
<body>
<div>
<ulclass="menunav">
<li><a href="javascript:void(0);">首页</a></li>
<li><a href="javascript:void(0);">成果展示</a>
<ul>
<li><a href="javascript:void(0);">电子白板</a></li>
<li><a href="javascript:void(0);">云空间</a></li>
<li><a href="javascript:void(0);">公告</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">工作室招牌</a>
<ul>
<li><a href="javascript:void(0);">权威</a></li>
<li><a href="javascript:void(0);">学习文章</a></li>
<li><a href="javascript:void(0);">动态</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">合作成果</a>
<ul>
<li><a href="javascript:void(0);">时间安排</a></li>
<li><a href="javascript:void(0);">视频展示</a></li>
<li><a href="javascript:void(0);">学习记录</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">联系我们</a>
<ul>
<li><a href="javascript:void(0);">地址</a></li>
<li><a href="javascript:void(0);">作者</a></li>
<li><a href="javascript:void(0);">意见与建议</a></li>
</ul>
</li>
</ul>
</div>
</body>
---------------------------------------------主要是引用上面设置的样式，包括menu和menunav两类样式，也就是这个菜单的两部分显示样式与动态显示样式，所有的文字链接都打的空链接javascript:void(0);，用户可根据需要设置具体链接地址与文本内容，代码中颜色字体都可更改，包括主菜单项及总宽高都可自行设计，不再赘述，有过空间装扮的老师应该都有此改代码经验。
写在最后，完成这个功能实现后，有些小兴奋，以前总以为非要开放js才能制作这样的菜单，现在不用js也能制作，而且可在博客中进行推广，对实现用户浏览导航有很好的帮助，也能体现一定的交互性，希望对大家的空间修饰有一定的帮助作用！（用户使用时直接复制代码进行改写，不要复制文字说明部分）
