用css配合HTML代码制作导航条下拉面板

用css配合HTML代码制作导航条下拉面板

导航下拉面板能让导航装载更多的内容，添加更多的关键词，有利于优化，也使网站显得更加高端大气，如果您需要，我就来提供！

首先我们来看看下拉面板的效果吧，这个事稍微复杂一点的下拉面板，我们会一步步为您讲解，如何制作出这样一个下拉面板，但前提是你需要了解CSS的定位知识和HTML代码，因此没有这些基础的同学要先学一下HTML代码和CSS（层叠样式表）的知识。

下面我们先来制作一个简单的导航：

css代码片段

html代码片段

接下来就着手下拉面板设计，首先我们来设计一个简单的，我们截取上一段代码中的

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;}

复杂的导航面板其实也是也定位技术一步步掌握的，下面来个产品的面板：

结构代码块儿

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}