下面小编要向大家介绍下CSS+DIV设计实例：纯CSS制作下拉导航菜单，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！
以下是引用片段：
style type="text/css"
.menu {
font-family: verdana, sans-serif;
;
;
;
;
}
.menu ul {
padding:0;
margin:0;
list-style-type: none;
}
.menu ul li {
;
;
}
.menu ul li a, .menu ul li a:visited {
;
;
color:#000;
;
;
color:#000;
solid #fff;
1px 0 0;
background:#dfc184;
;
line-;
}
* html .menu ul li a, .menu ul li a:visited {
;
w/;
}
.menu ul li ul {
display: none;
}
table {
margin:-1px;
;
;
}
/* specific to non IE browsers */
.menu ul a {
color:#fff;
background:#bd8d5e;
}
.menu ul ul {
;
;
;
;
left:0;
;
}
.menu ul ul li ul {
display: none;
}
.menu ul ul li a {
;
background:#faeec7;
color:#000;
;
;
10px;
}
.menu ul ul li {
background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul ul li a:hover {
background:#c9c9a7;
color:#000;
}
.menu ul ul ul {
;
;
;
top:0;
;
}
.menu ul ul {
left:-150px;
}
/style
!--[if lte IE 6]
style type="text/css"
.menu ul li a:hover {
color:#fff;
background:#bd8d5e;
}
.menu ul li a:hover ul {
;
;
;
left:0;
background:#fff;
margin-top:0;
marg/;
}
.menu ul li a:hover ul li a {
;
background:#dbe4ab;
color:#000;
;
;
10px;
;
w/;
}
.menu ul li a:hover ul li {
background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;
}
.menu ul li a:hover ul li a ul {
;
;
height:0;
width:0;
}
.menu ul li a:hover ul li a:hover {
background:#c9c9a7; color:#000;
}
.menu ul li a:hover ul li a:hover ul {
;
;
top:0;
color:#000;
;
}
.menu ul li a:hover ul li a:hover {
left:-150px;
}
/style
![endif]--
div class="menu"
ul
lia class="drop" href="../menu/&
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="../menu/&; title="The zero dollar ads page"zero dollars advertising page/a/li
lia href="../menu/&; title="Wrapping text around images"wrapping text around images/a/li
lia href="../menu/&; title="Styling forms"styled form/a/li
lia href="../menu/&; title="Removing active/focus borders"active focus/a/li
lia class="drop" href="../menu/&; title="Hover/click with no active/focus borders"hover/click with no borders
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="../menu/&; title="Styling forms"styled form/a/li
lia href="../menu/&; title="Removing active/focus borders"removing active/focus borders/a/li
lia href="../menu/&; title="Hover/click with no active/focus borders"hover/click/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
li class="upone"a href="../menu/&; title="Multi-position drop shadow"shadow boxing/a/li
lia href="../menu/&; title="Image Map for detailed information"image map for detailed information/a/li
lia href="../menu/&; title="fun with background images"fun with background images/a/li
lia href="../menu/&; title="fade-out scrolling"fade scrolling/a/li
lia href="../menu/&; title="em size images compared"em image sizes compared/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
lia href="../boxes/&
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="&; title="a coded list of spies"a coded list of spies/a/li
lia href="&; title="a horizontal vertical menu"vertical menu/a/li
lia href="&; title="an enlarging unordered list"enlarging unordered list/a/li
lia href="&; title="an unordered list with link images"link images/a/li
lia href="&; title="non-rectangular links"non-rectangular/a/li
lia href="&; title="jigsaw links"jigsaw links/a/li
lia href="&; title="circular links"circular links/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
lia href="../mozilla/&
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="../mozilla/&; title="A drop down menu"drop down menu/a/li
lia href="../mozilla/&; title="A cascading menu"cascading menu/a/li
lia href="../mozilla/&; title="Using content:"
lia href="../mozilla/&; title=":hover applied to a div"mozzie box/a/li
lia href="../mozilla/&; title="I can build a rainbow"I can build a rainbow with transparent borders/a/li
lia href="../mozilla/&; title="Snooker cue"a snooker cue using border art/a/li
lia href="../mozilla/&; title="Target Practise"target practise/a/li
lia href="../mozilla/&; title="Two tone headings"two tone headings/a/li
lia href="../mozilla/&; title="Shadow text"shadow text/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
lia href="../ie/&
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="../ie/&; title="Example one"the first example for InternetExplorer/a/li
lia href="../ie/&; title="Weft fonts"weft fonts/a/li
lia href="../ie/&; title="Vertical align"vertically aligning text/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
lia href="../opacity/&
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul
lia href="../opacity/&; title="colour wheel"a colour wheel using opaque colours/a/li
lia href="../opacity/&; title="a menu using opacity"a menu using opacity/a/li
lia href="../opacity/&; title="partial opacity"partial opacity/a/li
lia href="../opacity/&; title="partial opacity II"partial opacity II/a/li
lia class="drop" href="../menu/&; title="Hover/click with no active/focus borders"HOVER/CLICK
!--[if IE 7]!--
/a
!--![endif]--
tabletrtd
ul class="left"
lia href="../menu/&; title="Styling forms"styled form/a/li
lia href="../menu/&; title="Removing active/focus borders"removing active/focus borders/a/li
lia href="../menu/&; title="Hover/click with no active/focus borders"hover/click/a/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
/ul
/td/tr/table
!--[if lte IE 6]
/a
![endif]--
/li
/ul
/divstyle type="text/css".menu {font-family: verdana, sans-serif; ; ; ;;}.menu ul {padding:0; : none;}.menu ul li {;;}.menu ul li a, .menu ul li a:visited {; ; color:#000; ; ; color:#000; solid #fff; 1px 0 0; background:#dfc184; ; line-;}* html .menu ul li a, .menu ul li a:visited {;w/;}.menu ul li ul {display: none;}table {margin:-1px; ;;}/* specific to non IE browsers */.menu ul a {color:#fff; background:#bd8d5e;}.menu ul ul {; ; ;;left:0; ;}.menu ul ul li ul {display: none;}.menu ul ul li a {; background:#faeec7; color:#000; ; ; 10px; }.menu ul ul li {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}.menu ul ul li a:hover {background:#c9c9a7; color:#000;}.menu ul ul ul {; ; ; top:0;;}.menu ul ul {left:-150px;}/style!--[if lte IE 6]style type="text/css".menu ul li a:hover {color:#fff; background:#bd8d5e;}.menu ul li a:hover ul {; ; ; left:0;background:#fff;margin-top:0;marg/;}.menu ul li a:hover ul li a {; background:#dbe4ab; color:#000; ; ; 10px; ;w/;}.menu ul li a:hover ul li {background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}.menu ul li a:hover ul li a ul {; ; height:0; } ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li a:hover ul li a:hover ul {; ; top:0; color:#000;;}.menu ul li a:hover ul li a:hover {left:-150px;}/style![endif]--div class="menu"ullia class="drop" href="../menu/&!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="../menu/&; title="The zero dollar ads page"zero dollars advertising page/a/lilia href="../menu/&; title="Wrapping text around images"wrapping text around images/a/lilia href="../menu/&; title="Styling forms"styled form/a/lilia href="../menu/&; title="Removing active/focus borders"active focus/a/lilia class="drop" href="../menu/&; title="Hover/click with no active/focus borders"hover/click with no borders!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="../menu/&; title="Styling forms"styled form/a/lilia href="../menu/&; title="Removing active/focus borders"removing active/focus borders/a/lilia href="../menu/&; title="Hover/click with no active/focus borders"hover/click/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/lili class="upone"a href="../menu/&; title="Multi-position drop shadow"shadow boxing/a/lilia href="../menu/&; title="Image Map for detailed information"image map for detailed information/a/lilia href="../menu/&; title="fun with background images"fun with background images/a/lilia href="../menu/&; title="fade-out scrolling"fade scrolling/a/lilia href="../menu/&; title="em size images compared"em image sizes compared/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/lilia href="../boxes/&!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="&; title="a coded list of spies"a coded list of spies/a/lilia href="&; title="a horizontal vertical menu"vertical menu/a/lilia href="&; title="an enlarging unordered list"enlarging unordered list/a/lilia href="&; title="an unordered list with link images"link images/a/lilia href="&; title="non-rectangular links"non-rectangular/a/lilia href="&; title="jigsaw links"jigsaw links/a/lilia href="&; title="circular links"circular links/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/lilia href="../mozilla/&!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="../mozilla/&; title="A drop down menu"drop down menu/a/lilia href="../mozilla/&; title="A cascading menu"cascading menu/a/lilia href="../mozilla/&; title="Using content:"lia href="../mozilla/&; title=":hover applied to a div"mozzie box/a/lilia href="../mozilla/&; title="I can build a rainbow"I can build a rainbow with transparent borders/a/lilia href="../mozilla/&; title="Snooker cue"a snooker cue using border art/a/lilia href="../mozilla/&; title="Target Practise"target practise/a/lilia href="../mozilla/&; title="Two tone headings"two tone headings/a/lilia href="../mozilla/&; title="Shadow text"shadow text/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/lilia href="../ie/&!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="../ie/&; title="Example one"the first example for Internet Explorer/a/lilia href="../ie/&; title="Weft fonts"weft fonts/a/lilia href="../ie/&; title="Vertical align"vertically aligning text/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/lilia href="../opacity/&!--[if IE 7]!--/a!--![endif]--tabletrtdullia href="../opacity/&; title="colour wheel"a colour wheel using opaque colours/a/lilia href="../opacity/&; title="a menu using opacity"a menu using opacity/a/lilia href="../opacity/&; title="partial opacity"partial opacity/a/lilia href="../opacity/&; title="partial opacity II"partial opacity II/a/lilia class="drop" href="../menu/&; title="Hover/click with no active/focus borders"HOVER/CLICK!--[if IE 7]!--/a!--![endif]--tabletrtdul class="left"lia href="../menu/&; title="Styling forms"styled form/a/lilia href="../menu/&; title="Removing active/focus borders"removing active/focus borders/a/lilia href="../menu/&; title="Hover/click with no active/focus borders"hover/click/a/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/li/ul/td/tr/table!--[if lte IE 6]/a![endif]--/li/ul/divscript language="Javascript" var now = new Date(); ("img src="/counter.shtml？CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"" width="0" height="0""); /script noscript img src="？&&&&; width="0" height="0"/ /noscript
