完美兼容的纯CSS下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单</title>
<STYLE type=text/css>
body {background: #fff;font-family: Arial, sans-serif;font-size: 12px;}
#menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 50px 0px 100px 15px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 1px 0px 0px; WIDTH: 150px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 3em
}
#menu LI DL {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
#menu LI A {
TEXT-DECORATION: none
}
#menu LI A:visited {
TEXT-DECORATION: none
}
#menu LI DD {
DISPLAY: none
}
#menu LI:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI A:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI:hover DD {
DISPLAY: block
}
#menu LI A:hover DD {
DISPLAY: block
}
#menu LI:hover DL {
PADDING-BOTTOM: 20px
}
#menu LI A:hover DL {
PADDING-BOTTOM: 20px
}
#menu TABLE {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
#menu DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/bottom.gif) #c9ba65 no-repeat left bottom; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; CURSOR: pointer; PADDING-TOP: 0px; TEXT-ALIGN: center
}
#menu DT {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; BORDER-BOTTOM: #333 1px solid
}
#menu .one {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #b2ab9b no-repeat left top
}
#menu .two {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #949e7c no-repeat left top
}
#menu .three {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #d4d8bd no-repeat left top
}
#menu .four {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #e2dfa8 no-repeat left top
}
#menu DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-ALIGN: left
}
#menu DD.last {
BORDER-BOTTOM: #333 1px solid
}
.gallery DT A {
DISPLAY: block; COLOR: #333
}
.gallery DT A:visited {
DISPLAY: block; COLOR: #333
}
.gallery DD A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
.gallery DD A:visited {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
.gallery DD A:hover {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf
}
</STYLE>
</head>
<body>
<UL id=menu>
<LI><!--[if lte IE 6]><A
href="http://www.codefans.net">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=one><A
href="http://www.codefans.net">CODEFANS.NET</A>
<DD><A title="The zero dollar ads page"
href="http://www.cssplay.co.uk/menu/zero_dollars.html">Zero Dollars</A>
<DD class=last><A title="em size images compared"
href="http://www.cssplay.co.uk/menu/em_images.html">CodeFans.net</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.codefans.net">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=two><A
href="http://www.cssplay.co.uk/menus/index.html">AJAX相关</A>
<DD><A title="a coded list of spies"
href="http://www.codefans.net">聊天留言</A>
<DD><A title="a horizontal vertical menu"
href="http://www.codefans.net">论坛社区</A>
<DD><A title="an enlarging unordered list"
href="http://www.codefans.net">上传下载</A>
<DD>
<A title="circular links" href="http://www.cssplay.co.uk/menus/circles.html">circular links</A>
</DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=three><A
href="http://www.cssplay.co.uk/layouts/index.html">LAYOUTS</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_1_1.shtml">ASP</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_2_1.shtml">PHP</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_3_1.shtml">ASP.NET</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_4_1.shtml">JSP</A>
<DD class=last>
</DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=four><A
href="http://www.cssplay.co.uk/mozilla/index.html">MOZILLA</A>
<DD><A title="Using content:"
href="http://www.codefans.net">content:</A>
<DD><A title="Snooker cue"
href="http://www.cssplay.co.uk/mozilla/snooker.html">snooker</A>
<DD class=last><A title="Target Practise"
href="http://www.cssplay.co.uk/mozilla/target.html">target
practise</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI></UL>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS下拉菜单</title>
<STYLE type=text/css>
body {background: #fff;font-family: Arial, sans-serif;font-size: 12px;}
#menu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 50px 0px 100px 15px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#menu LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; Z-INDEX: 100; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 1px 0px 0px; WIDTH: 150px; PADDING-TOP: 0px; POSITION: relative; HEIGHT: 3em
}
#menu LI DL {
LEFT: 0px; POSITION: absolute; TOP: 0px
}
#menu LI A {
TEXT-DECORATION: none
}
#menu LI A:visited {
TEXT-DECORATION: none
}
#menu LI DD {
DISPLAY: none
}
#menu LI:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI A:hover {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
#menu LI:hover DD {
DISPLAY: block
}
#menu LI A:hover DD {
DISPLAY: block
}
#menu LI:hover DL {
PADDING-BOTTOM: 20px
}
#menu LI A:hover DL {
PADDING-BOTTOM: 20px
}
#menu TABLE {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; PADDING-BOTTOM: 0px; MARGIN: -1px; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
#menu DL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/bottom.gif) #c9ba65 no-repeat left bottom; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 150px; CURSOR: pointer; PADDING-TOP: 0px; TEXT-ALIGN: center
}
#menu DT {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FONT-SIZE: 1.1em; PADDING-BOTTOM: 5px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 5px; BORDER-BOTTOM: #333 1px solid
}
#menu .one {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #b2ab9b no-repeat left top
}
#menu .two {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #949e7c no-repeat left top
}
#menu .three {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #d4d8bd no-repeat left top
}
#menu .four {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/top.gif) #e2dfa8 no-repeat left top
}
#menu DD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 1em; BACKGROUND: #47a; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; TEXT-ALIGN: left
}
#menu DD.last {
BORDER-BOTTOM: #333 1px solid
}
.gallery DT A {
DISPLAY: block; COLOR: #333
}
.gallery DT A:visited {
DISPLAY: block; COLOR: #333
}
.gallery DD A {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
.gallery DD A:visited {
PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrow.gif) #47a no-repeat 10px 10px; PADDING-BOTTOM: 4px; WIDTH: 125px; COLOR: #fff; PADDING-TOP: 4px; TEXT-DECORATION: none
}
.gallery DD A:hover {
BACKGROUND: url(http://www.codefans.net/jscss/demoimg/200904/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf
}
</STYLE>
</head>
<body>
<UL id=menu>
<LI><!--[if lte IE 6]><A
href="http://www.codefans.net">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=one><A
href="http://www.codefans.net">CODEFANS.NET</A>
<DD><A title="The zero dollar ads page"
href="http://www.cssplay.co.uk/menu/zero_dollars.html">Zero Dollars</A>
<DD class=last><A title="em size images compared"
href="http://www.cssplay.co.uk/menu/em_images.html">CodeFans.net</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.codefans.net">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=two><A
href="http://www.cssplay.co.uk/menus/index.html">AJAX相关</A>
<DD><A title="a coded list of spies"
href="http://www.codefans.net">聊天留言</A>
<DD><A title="a horizontal vertical menu"
href="http://www.codefans.net">论坛社区</A>
<DD><A title="an enlarging unordered list"
href="http://www.codefans.net">上传下载</A>
<DD>
<A title="circular links" href="http://www.cssplay.co.uk/menus/circles.html">circular links</A>
</DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=three><A
href="http://www.cssplay.co.uk/layouts/index.html">LAYOUTS</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_1_1.shtml">ASP</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_2_1.shtml">PHP</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_3_1.shtml">ASP.NET</A>
<DD><A title="Cross browser fixed layout"
href="http://www.codefans.net/sort/list_4_1.shtml">JSP</A>
<DD class=last>
</DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI>
<LI><!--[if lte IE 6]><A
href="http://www.cssplay.co.uk/menus/drop_definition.html#nogo">
<TABLE>
<TBODY>
<TR>
<TD><![endif]-->
<DL class=gallery>
<DT class=four><A
href="http://www.cssplay.co.uk/mozilla/index.html">MOZILLA</A>
<DD><A title="Using content:"
href="http://www.codefans.net">content:</A>
<DD><A title="Snooker cue"
href="http://www.cssplay.co.uk/mozilla/snooker.html">snooker</A>
<DD class=last><A title="Target Practise"
href="http://www.cssplay.co.uk/mozilla/target.html">target
practise</A> </DD></DL><!--[if lte IE 6]></TD></TR></TBODY></TABLE></A><![endif]--></LI></UL>
</body>
</html>
