纯css制作三级下拉导航.docx

附录整页面（把下面的代码保存为.heml形式即可预览）

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

*{margin:

0;padding:

0}

body{font-size:

12px;}

ul{list-style-type:

none}

a{text-decoration:

none;}

/*以下是一级导航*/

.nav{width:

900px;height:

30px;background-color:

#b4b4b4}

.navulli{width:

100px;height:

30px;float:

left;position:

relative;}

.navullia{display:

block;width:

96px;border:

1pxsolid#CC000C;height:

26px;line-height:

26px;text-align:

center;}

.navullia:

hover{background-color:

#0033FF;}

/*以下是二级导航*/

.navulliul{display:

none}

.navulli:

hoverul{display:

block;width:

100px;position:

absolute;top:

30px;left:

0;background-color:

#b4b4b4}

.navulli:

hoverulli{width:

100px;height:

30px;position:

relative;}

.navulli:

hoverullia{display:

block;width:

96px;height:

26px;line-height:

26px;border:

1pxsolid#CC000C;text-align:

center;}

.navulli:

hoverullia:

hover{background-color:

#006666}

/*以下是三级导航*/

.navulli:

hoverulliul{display:

none}

.navulli:

hoverulli:

hoverul{display:

block;width:

100px;position:

absolute;top:

0px;left:

100px;background-color:

#b4b4b4}

.navulli:

hoverulli:

hoverulli{width:

100px;height:

30px;}

.navulli:

hoverulli:

hoverullia{display:

block;width:

96px;height:

26px;line-height:

26px;border:

1pxsolid#CC000C;text-align:

center;}

.navulli:

hoverulli:

hoverullia:

hover{background-color:

#00CC00}

.navulli:

hoverul.nav_jwul{display:

none}

.navulli:

hoverul.nav_jw:

hoverul{display:

block;width:

100px;position:

absolute;top:

0px;left:

-100px;background-color:

#b4b4b4}

.navulli:

hoverul.nav_jw:

hoverulli{width:

100px;height:

30px;}

.navulli:

hoverul.nav_jw:

hoverullia{display:

block;width:

96px;height:

26px;line-height:

26px;border:

1pxsolid#CC000C;text-align:

center;}

.navulli:

hoverul.nav_jw:

hoverullia:

hover{background-color:

#00CC00}

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二》

    • 顶级栏目三
    • 顶级栏目三

  • 顶级栏目二

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二

• 顶级栏目一

  • 顶级栏目二
  • 顶级栏目二
  • 顶级栏目二