示例一: <!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=utf-8" /> <title>Flywe の Blog - 用CSS+DIV实现下拉菜单效果 - 水平下拉菜单</title> <style type="text/css"> <!-- @import"dhtml-horiz.css"; -->
body { margin: 0; padding: 30px; background: #FFF; color: #666; }
h1 { font: bold 16px Arial, Helvetica, sans-serif; }
p { font: 11px Arial, Helvetica, sans-serif; }
a { color: #900; text-decoration: none; }
a:hover { background: #900; color: #FFF; }
/*CSS Code for Menu Begin:*/ /* Root = Horizontal, Secondary = Vertical */ ul#navmenu { margin: 0; border: 0 none; padding: 0; width: 500px; /*For KHTML*/ list-style: none; height: 24px; }
ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height: 24px; }
ul#navmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 24px; left: 0; }
ul#navmenu ul li { float: none; /*For Gecko*/ display: block !important; display: inline; /*For IE*/ }
/* Root Menu */ ul#navmenu a { border: 1px solid #FFF; border-right-color: #CCC; border-bottom-color: #CCC; padding: 0 6px; float: none !important; /*For Opera*/ float: left; /*For IE*/ display: block; background: #EEE; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important; height: 1%; /*For IE*/ }
/* Root Menu Hover Persistence */ ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a { background: #CCC; color: #FFF; }
/* 2nd Menu */ ul#navmenu li:hover li a, ul#navmenu li.iehover li a { float: none; background: #EEE; color: #666; }
/* 2nd Menu Hover Persistence */ ul#navmenu li:hover li a:hover, ul#navmenu li:hover li:hover a, ul#navmenu li.iehover li a:hover, ul#navmenu li.iehover li.iehover a { background: #CCC; color: #FFF; }
/* 3rd Menu */ ul#navmenu li:hover li:hover li a, ul#navmenu li.iehover li.iehover li a { background: #EEE; color: #666; }
/* 3rd Menu Hover Persistence */ ul#navmenu li:hover li:hover li a:hover, ul#navmenu li:hover li:hover li:hover a, ul#navmenu li.iehover li.iehover li a:hover, ul#navmenu li.iehover li.iehover li.iehover a { background: #CCC; color: #FFF; }
/* 4th Menu */ ul#navmenu li:hover li:hover li:hover li a, ul#navmenu li.iehover li.iehover li.iehover li a { background: #EEE; color: #666; }
/* 4th Menu Hover */ ul#navmenu li:hover li:hover li:hover li a:hover, ul#navmenu li.iehover li.iehover li.iehover li a:hover { background: #CCC; color: #FFF; }
ul#navmenu ul ul, ul#navmenu ul ul ul { display: none; position: absolute; top: 0; left: 160px; }
/* Do Not Move - Must Come Before display:block for Gecko */ ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul { display: none; }
ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul { display: block; }
</style> <script type="text/JavaScript"> navHover = function() { var lis = document.getElementById("navmenu").getElementsByTagName("LI"); for (var i=0; i<lis.length; i++) { lis[i].οnmοuseοver=function() { this.className+=" iehover"; } lis[i].οnmοuseοut=function() { this.className=this.className.replace(new RegExp(" iehover//b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", navHover); </script> </head> <body> <h1>CSS Menu - Horizontal</h1> <hr /> <ul id="navmenu"> <li><a href="#">Blog</a></li> <li><a href="#">work+ </a> <ul> <li><a href="#">Websites+ </a> <ul> <li><a href="http://www.baidu.com">test</a></li> <li><a href="#">qArcade</a></li> <li><a href="#">qLoM</a></li> <li><a href="#">qDT</a></li> </ul> </li> <li><a href="#">Pen and Ink</a></li> <li><a href="#">Free Interfaces</a></li> </ul> </li> <li><a href="#">Learn +</a> <ul> <li><a href="#">Fireworks +</a> <ul> <li><a href="#">aquaButton</a></li> <li><a href="#">aquaButton2</a></li> <li><a href="#">waterDrop</a></li> <li><a href="#">lightFX</a></li> <li><a href="#">lightFX2</a></li> </ul> </li> <li><a href="#">CSS +</a> <ul> <li><a href="#">footerStick</a></li> <li><a href="#">spriteNav</a></li> <li><a href="#">@import</a></li> </ul> </li> </ul> </li> <li><a href="#">Info</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html>
示例二: <style> *{font:normal normal 14px/1.5em "宋体";} li{list-style:none;} span{display:block;line-height:25px;} a{text-decoration:none;display:block;margin:5px;} .class1{ width:100px; height:25px; overflow-y:hidden; border:1px solid #ffe663; text-align:center; background:#fff2d9; }
.class2{ width:100px; height:135px; overflow-y:hidden; border:1px solid #ffe663; text-align:center; background:#fff2d9; }
a:hover{ border:1px dashed red; } </style>
<div> <li οnmοuseοver="this.className='class2'" οnmοuseοut="this.className='class1'" class="class1"> <span>下挂菜单</span> <a href="#">万水千山</a> <a href="#">万种风情</a> <a href="#">万山千水</a> <a href="#">万马奔腾</a> </li> </div>
示例三: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0054)http://www.jluvip.com/works/css/dropmenu/dropmenu.html --> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>THE ULTIMATE CSS ONLY DROPDOWN MENU</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> <style type=text/css> .menu { FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative } .menu UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } .menu UL LI { FLOAT: left; POSITION: relative } .menu UL LI A { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none } .menu UL LI A:visited { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none } * HTML .menu UL LI A { WIDTH: 139px } .menu UL LI A:visited { WIDTH: 139px } .menu UL LI UL { DISPLAY: none } TABLE { FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse } .menu UL LI:hover A { BACKGROUND: #bd8d5e; COLOR: #fff } .menu UL LI:hover UL { MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em } .menu UL LI:hover UL LI UL { DISPLAY: none } .menu UL LI:hover UL LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto } .menu UL LI:hover UL LI A.drop { BACKGROUND: url(drop.png) #c9c9a7 no-repeat right bottom } .menu UL LI:hover UL LI A:hover { BACKGROUND: #c9c9a7; COLOR: #000 } .menu UL LI:hover UL LI:hover UL { DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px } .menu UL LI:hover UL LI:hover UL.left { LEFT: -150px } </style> <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="final_drop_ie.css" /> <![endif]--> <META content="MSHTML 6.00.6000.16441" name=GENERATOR></HEAD> <BODY> <DIV class=menu> <UL> <LI><A class=drop href="http://www.jluvip.com/works/css/menu/index.html">DEMOS<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="The zero dollar ads page" href="http://www.jluvip.com/works/css/menu/zero_dollars.html">zero dollars advertising page</A> </LI> <LI><A title="Wrapping text around images" href="http://www.jluvip.com/works/css/menu/embed.html">wrapping text around images</A> </LI> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">active focus</A> </LI> <LI><A class=drop title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click with no borders<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing active/focus borders</A> </LI> <LI><A title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI> <LI class=upone><A title="Multi-position drop shadow" href="http://www.jluvip.com/works/css/menu/shadow_boxing.html">shadow boxing</A> </LI> <LI><A title="Image Map for detailed information" href="http://www.jluvip.com/works/css/menu/old_master.html">image map for detailed information</A> </LI> <LI><A title="fun with background images" href="http://www.jluvip.com/works/css/menu/bodies.html">fun with background images</A> </LI> <LI><A title="fade-out scrolling" href="http://www.jluvip.com/works/css/menu/fade_scroll.html">fade scrolling</A> </LI> <LI><A title="em size images compared" href="http://www.jluvip.com/works/css/menu/em_images.html">em image sizes compared</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI> <LI><A href="http://www.jluvip.com/works/css/boxes/index.html">BOXES<!--[if IE 7]> --> </A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="a coded list of spies" href="http://www.jluvip.com/works/css/dropmenu/spies.html">a coded list of spies</A> </LI> <LI><A title="a horizontal vertical menu" href="http://www.jluvip.com/works/css/dropmenu/vertical.html">vertical menu</A> </LI> <LI><A title="an enlarging unordered list" href="http://www.jluvip.com/works/css/dropmenu/expand.html">enlarging unordered list</A> </LI> <LI><A title="an unordered list with link images" href="http://www.jluvip.com/works/css/dropmenu/enlarge.html">link images</A> </LI> <LI><A title="non-rectangular links" href="http://www.jluvip.com/works/css/dropmenu/cross.html">non-rectangular</A> </LI> <LI><A title="jigsaw links" href="http://www.jluvip.com/works/css/dropmenu/jigsaw.html">jigsaw links</A> </LI> <LI><A title="circular links" href="http://www.jluvip.com/works/css/dropmenu/circles.html">circular links</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI> <LI><A href="http://www.jluvip.com/works/css/mozilla/index.html">MOZILLA<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="A drop down menu" href="http://www.jluvip.com/works/css/mozilla/dropdown.html">drop down menu</A> </LI> <LI><A title="A cascading menu" href="http://www.jluvip.com/works/css/mozilla/cascade.html">cascading menu</A> </LI> <LI><A title="Using content:" href="http://www.jluvip.com/works/css/mozilla/content.html">content:</A> </LI> <LI><A title=":hover applied to a div" href="http://www.jluvip.com/works/css/mozilla/moxbox.html">mozzie box</A> </LI> <LI><A title="I can build a rainbow" href="http://www.jluvip.com/works/css/mozilla/rainbow.html">I can build a rainbow with transparent borders</A> </LI> <LI><A title="Snooker cue" href="http://www.jluvip.com/works/css/mozilla/snooker.html">a snooker cue using border art</A> </LI> <LI><A title="Target Practise" href="http://www.jluvip.com/works/css/mozilla/target.html">target practise</A> </LI> <LI><A title="Two tone headings" href="http://www.jluvip.com/works/css/mozilla/splittext.html">two tone headings</A> </LI> <LI><A title="Shadow text" href="http://www.jluvip.com/works/css/mozilla/shadow_text.html">shadow text</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI> <LI><A href="http://www.jluvip.com/works/css/ie/index.html">EXPLORER<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="Example one" href="http://www.jluvip.com/works/css/ie/exampleone.html">the first example for Internet Explorer</A> </LI> <LI><A title="Weft fonts" href="http://www.jluvip.com/works/css/ie/weft.html">weft fonts</A> </LI> <LI><A title="Vertical align" href="http://www.jluvip.com/works/css/ie/exampletwo.html">vertically aligning text</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI> <LI><A href="http://www.jluvip.com/works/css/opacity/index.html">OPACITY<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL> <LI><A title="colour wheel" href="http://www.jluvip.com/works/css/opacity/colours.html">a colour wheel using opaque colours</A> </LI> <LI><A title="a menu using opacity" href="http://www.jluvip.com/works/css/opacity/picturemenu.html">a menu using opacity</A> </LI> <LI><A title="partial opacity" href="http://www.jluvip.com/works/css/opacity/png.html">partial opacity</A> </LI> <LI><A title="partial opacity II" href="http://www.jluvip.com/works/css/opacity/png2.html">partial opacity II</A> </LI> <LI><A class=drop title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">HOVER/CLICK<!--[if IE 7]> <!--></A><!--<![endif]--> <TABLE> <TBODY> <TR> <TD> <UL class=left> <LI><A title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</A> </LI> <LI><A title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing active/focus borders</A> </LI> <LI><A title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</A> </LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI></UL></TD></TR></TBODY></TABLE><!--[if lte IE 6]> </a> <![endif]--></LI></UL></DIV></BODY></HTML>
更多技术文章请参看施昌权的个人网站: http://www.joyvc.cn