代码简介:纯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> <title>纯CSS打造的圆角下拉导航菜单_网页代码站(www.webdm.cn)</title> <STYLE type=text/css> body {background: #fff;font-family: "Lucida Grande", Helvetica, 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.webdm.cn/images/20100916/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: #444 1px solid } #menu .one { BACKGROUND: url(http://www.webdm.cn/images/20100916/top.gif) #b2ab9b no-repeat left top } #menu .two { BACKGROUND: url(http://www.webdm.cn/images/20100916/top.gif) #949e7c no-repeat left top } #menu .three { BACKGROUND: url(http://www.webdm.cn/images/20100916/top.gif) #d4d8bd no-repeat left top } #menu .four { BACKGROUND: url(http://www.webdm.cn/images/20100916/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: #444 1px solid } .gallery DT A { DISPLAY: block; COLOR: #444 } .gallery DT A:visited { DISPLAY: block; COLOR: #444 } .gallery DD A { PADDING-RIGHT: 5px; DISPLAY: block; PADDING-LEFT: 20px; BACKGROUND: url(http://www.webdm.cn/images/20100916/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.webdm.cn/images/20100916/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.webdm.cn/images/20100916/arrowr.gif) #258 no-repeat 11px 10px; COLOR: #9cf } </STYLE> </head> <body> <UL id=menu> <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=one><A href="http://www.cssplay.co.uk/menu/index.html">DEMOS</A> <DD><A title="The zero dollar ads page" href="http://www.cssplay.co.uk/menu/zero_dollars.html">zero dollars</A> <DD><A title="Wrapping text around images" href="http://www.cssplay.co.uk/menu/embed.html">wrapping text</A> <DD><A title="Styling forms" href="http://www.cssplay.co.uk/menu/form.html">styled form</A> <DD><A title="Removing active/focus borders" href="http://www.cssplay.co.uk/menu/nodots.html">active focus</A> <DD><A title="Multi-position drop shadow" href="http://www.cssplay.co.uk/menu/shadow_boxing.html">shadow boxing</A> <DD><A title="Image Map for detailed information" href="http://www.cssplay.co.uk/menu/old_master.html">image map</A> <DD><A title="fun with background images" href="http://www.cssplay.co.uk/menu/bodies.html">fun with backgrounds</A> <DD><A title="fade-out scrolling" href="http://www.cssplay.co.uk/menu/fade_scroll.html">fade scrolling</A> <DD class=last><A title="em size images compared" href="http://www.cssplay.co.uk/menu/em_images.html">em sized images</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=two><A href="http://www.cssplay.co.uk/menus/index.html">MENUS</A> <DD><A title="a coded list of spies" href="http://www.cssplay.co.uk/menus/spies.html">spies menu</A> <DD><A title="a horizontal vertical menu" href="http://www.cssplay.co.uk/menus/vertical.html">vertical menu</A> <DD><A title="an enlarging unordered list" href="http://www.cssplay.co.uk/menus/expand.html">enlarging list</A> <DD><A title="an unordered list with link images" href="http://www.cssplay.co.uk/menus/enlarge.html">link images</A> <DD><A title="non-rectangular links" href="http://www.cssplay.co.uk/menus/cross.html">non-rectangular links</A> <DD><A title="jigsaw links" href="http://www.cssplay.co.uk/menus/jigsaw.html">jigsaw links</A> <DD class=last><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.cssplay.co.uk/layouts/bodyfix.html">Fixed 1</A> <DD><A title="Cross browser fixed layout" href="http://www.cssplay.co.uk/layouts/body2.html">Fixed 2</A> <DD><A title="Cross browser fixed layout" href="http://www.cssplay.co.uk/layouts/body4.html">Fixed 3</A> <DD><A title="Cross browser fixed layout" href="http://www.cssplay.co.uk/layouts/body5.html">Fixed 4</A> <DD class=last><A title="A simple minimum width layout" href="http://www.cssplay.co.uk/layouts/minimum.html">minimum width for Internet Explorer</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=four><A href="http://www.cssplay.co.uk/mozilla/index.html">MOZILLA</A> <DD><A title="A drop down menu" href="http://www.cssplay.co.uk/mozilla/dropdown.html">drop down menu</A> <DD><A title="A cascading menu" href="http://www.cssplay.co.uk/mozilla/cascade.html">cascading menu</A> <DD><A title="Using content:" href="http://www.cssplay.co.uk/mozilla/content.html">content:</A> <DD><A title=":hover applied to a div" href="http://www.cssplay.co.uk/mozilla/moxbox.html">mozzie box</A> <DD><A title="I can build a rainbow" href="http://www.cssplay.co.uk/mozilla/rainbow.html">rainbow box</A> <DD><A title="Snooker cue" href="http://www.cssplay.co.uk/mozilla/snooker.html">snooker cue made using border art</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> <br><br><br><br> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/b6932b5a-b299-4d4e-abdd-ab48f7cfcdc1.html