css用div二级下拉菜单,div+css下拉二级菜单

纯CSS菜单

body{font-family:"新宋体"; margin:0;}/* 设置全页面的字体和页边距*/

.nav{width:720px; margin:0 auto 0 auto;}/*设置DIV的宽和居中*/

.nav li li a {display:inline-block;}/*是处理 IE - BUG 的*/

.nav li li a {display:block;}

.nav ul {list-style-type:none;margin:0;padding:0;}

.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:12px;padding:0;margin:0;width:120px;}/*设置一级菜单居左(float可以在同一行显示)、宽度和其它属性*/

.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}/*设置一级菜单有链接的地方display:block以块的方式显示和其它属性*/

.nav ul table {width:100%;border:0;padding:0;margin:0;}/*设置表格的属性*/

.nav ul li ul {display:none;}/*设置下拉为不可见*/

.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}/*设置一级菜单鼠标经过的文字颜色和背景色*/

.nav ul li:hover ul,/*IE6.0不支持这种写法,只能用后者*/.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}/*设置鼠标经过一级菜单的文字时出现下一级的UL以块的方式显示，UL包括了LI和A里所有的东西，因此只要显示UL。其它都可以显示*/

.nav ul ul li {display:block;width:100%;border:none;}/*设置二级菜单的宽度和以块显示等*/

.nav ul ul li a{display:block;color:blue;border:none; color:#555;}/*设置二级菜单鼠标经过的文字颜色和背景色以块显示*/

• 首页

  111112 111112 111112

• 导航2

  222221 222221 222221

• 导航3

  333331 333331 333331

• 导航4

  444441 444441 444441

• 导航5

  555551 555551 555551

• 导航6

  666661 666661 666661