导航下拉面板能让导航装载更多的内容，添加更多的关键词，有利于优化，也使网站显得更加高端大气，如果您需要，我就来提供！
工具/原料
1
Dreamwere，新手推荐
2
懂得html代码原理，能看懂css定位
方法/步骤
1
首先我们来看看下拉面板的效果吧，这个事稍微复杂一点的下拉面板，我们会一步步为您讲解，如何制作出这样一个下拉面板，但前提是你需要了解CSS的定位知识和HTML代码，因此没有这些基础的同学要先学一下HTML代码和CSS（层叠样式表）的知识。
2
下面我们先来制作一个简单的导航：css代码片段html代码片段
3关于建冶 这一行，首先铺好结构：关于建冶 css片段.nav a {display:block}.nav a:hover { display:block;background:#F00}/*下拉列表*/.nav ul{display:none;}.nav li:hover ul{display:block; position:absolute; width:130px; top:46px; background:#069;}.nav li:hover ul li{ border-bottom:#99C 1px solid; border-right:none;}
接下来就着手下拉面板设计，首先我们来设计一个简单的，我们截取上一段代码中的
4产品中心 css代码块儿/*产品下拉面板*/li#pro:hover ul#menu { width:960px; position:absolute; top:46px; background:#069; margin-left:-375px; z-index:2 }li#pro:hover ul#menu li { width:180px; height:200px; line-height:24px; background:#069; float:left; z-index:3; overflow:hidden;}li#pro:hover ul#menu li p a{ display:block; border-bottom:0; color:#FFF; background:none; text-align:left; padding-left:30px; z-index:3}li#pro:hover ul#menu li p a:hover{display:block;background:#F00; text-decoration:underline; z-index:3}
复杂的导航面板其实也是也定位技术一步步掌握的，下面来个产品的面板：结构代码块儿