<!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> </head> <mce:style type="text/css"><!-- body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:520px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; } --></mce:style><style type="text/css" mce_bogus="1"> body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ display:inline; list-style:none; list-style-position:outside; text-align:center; font-weight:bold; float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px 5px; width:100px; } a:hover{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#539D26; } a:active{ color:white; float:left; padding:3px 3px 0px 20px; width:88px; text-decoration:none; background-color:#BD06B4; } #nav{ width:520px; height:30px; border-bottom:0px; padding:0px 5px; position:absolute; z-index:1; left: 198px; top: 25px; } .list{ line-height:20px; text-align:left; padding:4px; font-weight:normal; } .menu1{ width:120px; height:auto; margin:6px 4px 0px 0px; border:1px solid #9CDD75; background-color:#F1FBEC; color:#336601; padding:6px 0px 0px 0px; cursor:hand; overflow-y:hidden; filter:Alpha(opacity=70); -moz-opacity:0.7; } .menu2{ width:120px; height:18px; margin:6px 4px 0px 0px; background-color:#F5F5F5; color:#999999; border:1px solid #EEE8DD; padding:6px 0px 0px 0px; overflow-y:hidden; cursor:hand; }</style> <body> <div id="nav"> <ul> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Home Page <div class="list"> <a href="#" mce_href="#">网页教学</a><br /> <a href="#" mce_href="#">我的首页</a><br /> <a href="#" mce_href="#">我的日志</a><br /> <a href="#" mce_href="#">我的日志</a><br /> <a href="#" mce_href="#">我的相册</a><br /> <a href="#" mce_href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Connection <div class="list"> <a href="#" mce_href="#">网页教学</a><br /> <a href="#" mce_href="#">我的首页</a><br /> <a href="#" mce_href="#">我的日志</a><br /> <a href="#" mce_href="#">我的相册</a><br /> <a href="#" mce_href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">My Files <div class="list"> <a href="#" mce_href="#">网页教学</a><br /> <a href="#" mce_href="#">我的相册</a><br /> <a href="#" mce_href="#">我的收藏</a><br /> </div> </li> <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">Management <div class="list"> <a href="#" mce_href="#">网页教学</a><br /> <a href="#" mce_href="#">我的首页</a><br /> <a href="#" mce_href="#">我的日志</a><br /> <a href="#" mce_href="#">我的相册</a><br /> <a href="#" mce_href="#">我的收藏</a><br /> <a href="#" mce_href="#">我的日志</a><br /> <a href="#" mce_href="#">我的相册</a><br /> <a href="#" mce_href="#">我的收藏</a><br /> </div> </li> </ul> </div> </body> </html> <!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" /> <meta name="Author" content="网页教学网" /> <meat name="Author BlogURL" content="http://www.webjx.com/" /> <meta name="description" content="Templat" /> <title>简约下拉菜单-纯CSS+XHTML制作</title> <mce:style type="text/css"><!-- * { margin:0; padding:0; } body { font:12px Verdana, Geneva, sans-serif #444; line-height:1.5; } ul li { list-style:none; } .menu { width:660px; margin:20px auto; } .menu li { display:inline; float:left; margin:0 5px; background:#f2f2f2; border:1px #39c solid; text-align:center; font-size:14px; font-weight:700; line-height:30px; cursor:hand; } .tuckUp { display:inline; width:120px; height:30px; overflow:hidden; background:#f2f2f2; } .pullDown{ display:inline; height:auto; } .item a:link, .item a:visited { display:inline; float:left; width:110px; background:#ccc; text-align:center; color:#444; font-size:12px; font-weight:normal; text-decoration:none; line-height:25px; margin:0 5px 5px 5px; } .item a:hover { display:inline; float:left; background:#39c; width:100px; color:#FFF; text-decoration:none; text-align:center; font-size:12px; font-weight:700; font-weight:normal; line-height:25px; padding:0 0 0 10px; margin:0 5px 5px 5px; } --></mce:style><style type="text/css" mce_bogus="1">* { margin:0; padding:0; } body { font:12px Verdana, Geneva, sans-serif #444; line-height:1.5; } ul li { list-style:none; } .menu { width:660px; margin:20px auto; } .menu li { display:inline; float:left; margin:0 5px; background:#f2f2f2; border:1px #39c solid; text-align:center; font-size:14px; font-weight:700; line-height:30px; cursor:hand; } .tuckUp { display:inline; width:120px; height:30px; overflow:hidden; background:#f2f2f2; } .pullDown{ display:inline; height:auto; } .item a:link, .item a:visited { display:inline; float:left; width:110px; background:#ccc; text-align:center; color:#444; font-size:12px; font-weight:normal; text-decoration:none; line-height:25px; margin:0 5px 5px 5px; } .item a:hover { display:inline; float:left; background:#39c; width:100px; color:#FFF; text-decoration:none; text-align:center; font-size:12px; font-weight:700; font-weight:normal; line-height:25px; padding:0 0 0 10px; margin:0 5px 5px 5px; }</style> </head> <body> <ul class="menu"> <li class="tuckUp" οnmοusemοve="this.className='pullDown'" οnmοuseοut="this.className='tuckUp'">MenuOne <div class="item"><a href="/" mce_href="">ITEM01</a></a><br /> <a href="/" mce_href="">ITEM02</a></a><br /> <a href="/" mce_href="">ITEM03</a><br /> <a href="/" mce_href="">ITEM04</a><br /> <a href="/" mce_href="">ITEM05</a><br /> <a href="/" mce_href="">ITEM06</a><br /></div> </li> <li class="tuckUp" οnmοuseοver="this.className='pUllDown'" οnmοuseοut="this.className='tuckUp'">MenuTwo <div class="item"><a href="/" mce_href="">ITEM01</a><br /> <a href="/" mce_href="">ITEM02</a><br /> <a href="/" mce_href="">ITEM03</a><br /> <a href="/" mce_href="">ITEM04</a><br /></div> </li> <li class="tuckUp" οnmοuseοver="this.className='pullDown'" οnmοuseοut="this.className='tuckUp'">MenuThree <div class="item" ><a href="/" mce_href="">ITEM01</a><br /> <a href="/" mce_href="">ITEM02</a><br /> <a href="/" mce_href="">ITEM03</a><br /> <a href="/" mce_href="">ITEM04</a><br /> <a href="/" mce_href="">ITEM05</a><br /></div> </li> <li class="tuckUp" οnmοuseοver="this.className='pUllDown'" οnmοuseοut="this.className='tuckUp'">MenuFour <div class="item"><a href="/" mce_href="">ITEM01</a><br /> <a href="/" mce_href="">ITEM04</a><br /> <a href="/" mce_href="">ITEM05</a><br /></div> </li> <li class="tuckUp" οnmοuseοver="this.className='pUllDown'" οnmοuseοut="this.className='tuckUp'">MenuFive <div class="item"><a href="/" mce_href="">ITEM01</a><br /> <a href="/" mce_href="">ITEM02</a><br /> <a href="/" mce_href="">ITEM03</a><br /> <a href="/" mce_href="">ITEM04</a><br /> <a href="/" mce_href="">ITEM05</a><br /></div> </li> </ul> </body> </html> <!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>纯CSS下拉菜单</title> <mce:style type="text/css"><!-- /* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;} --></mce:style><style type="text/css" mce_bogus="1">/* common styling */ .menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li:hover ul li a.hide {background:#6a3; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} .menu ul li:hover ul li:hover ul.left {left:-105px;}</style> <!--[if lte IE 6]> <mce:style type="text/css"><!-- .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;} --></mce:style><style type="text/css" mce_bogus="1">.menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#fff; background:#36f;} .menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;} .menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#6fc; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} .menu ul li a:hover ul li a:hover ul.left {left:-105px;}</style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html" mce_href="menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html" mce_href="menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" mce_href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" mce_href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" mce_href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" mce_href="menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" mce_href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" mce_href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" mce_href="menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html" mce_href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html" mce_href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" mce_href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" mce_href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" mce_href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" mce_href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" mce_href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html" mce_href="boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html" mce_href="boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" mce_href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" mce_href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" mce_href="mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" mce_href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" mce_href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" mce_href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" mce_href="mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" mce_href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" mce_href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html" mce_href="ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html" mce_href="ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" mce_href="ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" mce_href="ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" mce_href="ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html" mce_href="opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html" mce_href="opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" mce_href="opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" mce_href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" mce_href="opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" mce_href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK <table><tr><td> <![endif]--> <ul class="left"> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html> <!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" c /> <title>纯CSS下拉菜单</title> <mce:style type="text/css"><!-- /* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; } --></mce:style><style type="text/css" mce_bogus="1">/* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; } /* remove the bullets and set the margin and padding to zero for the unordered list */ .menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; }</style> <!--[if lte IE 6]> <mce:style type="text/css"><!-- /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; } --></mce:style><style type="text/css" mce_bogus="1">/* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */ /* Get rid of any default table style */ table { border-collapse:collapse; margin:0; padding:0; } /* ignore the link used by 'other browsers' */ .menu ul li a.hide, .menu ul li a:visited.hide { display:none; } /* set the background and foreground color of the main menu link on hover */ .menu ul li a:hover { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li a:hover ul { display:block; position:absolute; top:32px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li a:hover ul li a { background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li a:hover ul li a:hover { background:#dfc184; color:#000; }</style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html" mce_href="menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html" mce_href="menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" mce_href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" mce_href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/shadow_boxing.html" mce_href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" mce_href="menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" mce_href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" mce_href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" mce_href="menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html" mce_href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html" mce_href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" mce_href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" mce_href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" mce_href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" mce_href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" mce_href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html" mce_href="boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html" mce_href="boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" mce_href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" mce_href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" mce_href="mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" mce_href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" mce_href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" mce_href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" mce_href="mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" mce_href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" mce_href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html" mce_href="ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html" mce_href="ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" mce_href="ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" mce_href="ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" mce_href="ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html" mce_href="opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html" mce_href="opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul> <li><a href="../opacity/colours.html" mce_href="opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" mce_href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" mce_href="opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" mce_href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!-- clear the floats if required --> <div class="clear"> </div> </div> </body> </html> <!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>纯CSS下拉菜单</title> <mce:style type="text/css"><!-- /* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} .menu ul {padding:0; margin:0; list-style-type: none;} .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#b3ab79;} .menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} .menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} .menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li:hover ul.right li {float:right;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;} --></mce:style><style type="text/css" mce_bogus="1">/* common styling */ .menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;} .menu ul {padding:0; margin:0; list-style-type: none;} .menu ul li {float:left; border-left:1px solid #eee; width:106px;} .menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#b3ab79;} .menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;} .menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;} .menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;} .menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li:hover ul.right li {float:right;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}</style> <!--[if lte IE 6]> <mce:style type="text/css"><!-- table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;} .menu ul li a:hover {color:#fff; background:#b3ab79;} .menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;} .menu ul li a:hover ul.left_side li {float:left;} .menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;} --></mce:style><style type="text/css" mce_bogus="1">table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a, .menu ul li a:visited {background:#c9c9a7 url(../../graphics/drop.gif) 20px right no-repeat;} .menu ul li a:hover {color:#fff; background:#b3ab79;} .menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;} .menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;} .menu ul li a:hover ul.left_side li {float:left;} .menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;} .menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}</style> <![endif]--> </head> <body> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html" mce_href="menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html" mce_href="menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" mce_href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" mce_href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK <table><tr><td> <![endif]--> <ul class="right_side"> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" mce_href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" mce_href="menu/old_master.html" title="Image Map for detailed information">image map</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html" mce_href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html" mce_href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" mce_href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" mce_href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" mce_href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" mce_href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" mce_href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html" mce_href="boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html" mce_href="boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" mce_href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" mce_href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" mce_href="mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" mce_href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" mce_href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" mce_href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" mce_href="mozilla/target.html" title="Target Practise">target practise</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html" mce_href="ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html" mce_href="ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul class="right_side"> <li><a href="../ie/exampleone.html" mce_href="ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" mce_href="ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" mce_href="ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html" mce_href="opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html" mce_href="opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul class="right_side"> <li><a href="../opacity/colours.html" mce_href="opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" mce_href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" mce_href="opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" mce_href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK <table><tr><td> <![endif]--> <ul class="left_side"> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html> <!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>纯CSS下拉菜单</title> <mce:style type="text/css"><!-- /* common styling */ .menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#000; background:#e9e9c7;} .menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} .menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li:hover ul.left {left:-105px;} .menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;} --></mce:style><style type="text/css" mce_bogus="1">/* common styling */ .menu {font-family: verdana, arial, sans-serif; width:735px; position:relative; font-size:11px; margin:50px auto;} .menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#c9c9a7; line-height:25px; font-size:11px;} .menu ul {padding:0; margin:0;list-style-type: none; } .menu ul li {float:left; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#000; background:#e9e9c7;} .menu ul li:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li:hover ul li a.hide {background:#a7c9c9; color:#000;} .menu ul li:hover ul li {display:block; background:#fff; color:#000;width:199px; clear:both;} .menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;} .menu ul li:hover ul li ul {display: none;} .menu ul li:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul {display:block; position:absolute; left:210px; bottom:0;} .menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;} .menu ul li:hover ul li:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li:hover ul.left {left:-105px;} .menu ul li:hover ul li:hover ul.left {left:-210px; width:209px;}</style> <!--[if lte IE 6]> <mce:style type="text/css"><!-- table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#000; background:#e9e9c7;} .menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;} .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} .menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li a:hover ul.left {left:-105px;} .menu ul li a:hover ul li a:hover ul.left {left:-210px;} --></mce:style><style type="text/css" mce_bogus="1">table {border-collapse:collapse; margin:0; padding:0;} .menu ul li a.hide, .menu ul li a:visited.hide {display:none;} .menu ul li a:hover ul li a.hide {display:none;} .menu ul li a:hover {color:#000; background:#e9e9c7;} .menu ul li a:hover ul {display:block; position:absolute; bottom:26px; left:0;} .menu ul li a:hover ul li {display:block; background:#fff; color:#000; width:199px;} .menu ul li a:hover ul li a.sub {background:#a7c9c9; color:#000;} .menu ul li a:hover ul li a {display:block; background:#c9a7c9; color:#000; width:100%; padding-left:10px;} .menu ul li a:hover ul li a ul {visibility:hidden;} .menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:210px; bottom:0;} .menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;} .menu ul li a:hover ul li a:hover ul li a:hover {background:#c9c9a7; color:#000;} .menu ul li a:hover ul.left {left:-105px;} .menu ul li a:hover ul li a:hover ul.left {left:-210px;}</style> <![endif]--> </head> <body> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <div class="menu"> <ul> <li><a class="hide" href="../menu/index.html" mce_href="menu/index.html">DEMOS</a> <!--[if lte IE 6]> <a href="../menu/index.html" mce_href="menu/index.html">DEMOS <table><tr><td> <![endif]--> <ul> <li><a href="../menu/zero_dollars.html" mce_href="menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li> <li><a href="../menu/embed.html" mce_href="menu/embed.html" title="Wrapping text around images">wrapping text</a></li> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK ></a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK > <table><tr><td> <![endif]--> <ul> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../menu/shadow_boxing.html" mce_href="menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" mce_href="menu/old_master.html" title="Image Map for detailed information">image map</a></li> <li><a href="../menu/bodies.html" mce_href="menu/bodies.html" title="fun with background images">fun backgrounds</a></li> <li><a href="../menu/fade_scroll.html" mce_href="menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" mce_href="menu/em_images.html" title="em size images compared">em sized images</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="index.html" mce_href="index.html">MENUS</a> <!--[if lte IE 6]> <a href="index.html" mce_href="index.html">MENUS <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS</a> <!--[if lte IE 6]> <a href="../layouts/index.html" mce_href="layouts/index.html">LAYOUTS <table><tr><td> <![endif]--> <ul> <li><a href="../layouts/bodyfix.html" mce_href="layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li> <li><a href="../layouts/body2.html" mce_href="layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li> <li><a href="../layouts/body4.html" mce_href="layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li> <li><a href="../layouts/body5.html" mce_href="layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li> <li><a href="../layouts/minimum.html" mce_href="layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../boxes/index.html" mce_href="boxes/index.html">BOXES</a> <!--[if lte IE 6]> <a href="../boxes/index.html" mce_href="boxes/index.html">BOXES <table><tr><td> <![endif]--> <ul> <li><a href="spies.html" mce_href="spies.html" title="a coded list of spies">spies menu</a></li> <li><a href="vertical.html" mce_href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> <li><a href="expand.html" mce_href="expand.html" title="an enlarging unordered list">enlarging list</a></li> <li><a href="enlarge.html" mce_href="enlarge.html" title="an unordered list with link images">link images</a></li> <li><a href="cross.html" mce_href="cross.html" title="non-rectangular links">non-rectangular</a></li> <li><a href="jigsaw.html" mce_href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> <li><a href="circles.html" mce_href="circles.html" title="circular links">circular links</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA</a> <!--[if lte IE 6]> <a href="../mozilla/index.html" mce_href="mozilla/index.html">MOZILLA <table><tr><td> <![endif]--> <ul> <li><a href="../mozilla/dropdown.html" mce_href="mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> <li><a href="../mozilla/cascade.html" mce_href="mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> <li><a href="../mozilla/content.html" mce_href="mozilla/content.html" title="Using content:">content:</a></li> <li><a href="../mozilla/moxbox.html" mce_href="mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> <li><a href="../mozilla/rainbow.html" mce_href="mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li> <li><a href="../mozilla/snooker.html" mce_href="mozilla/snooker.html" title="Snooker cue">snooker cue</a></li> <li><a href="../mozilla/target.html" mce_href="mozilla/target.html" title="Target Practise">target practise</a></li> <li><a href="../mozilla/splittext.html" mce_href="mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> <li><a href="../mozilla/shadow_text.html" mce_href="mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../ie/index.html" mce_href="ie/index.html">EXPLORER</a> <!--[if lte IE 6]> <a href="../ie/index.html" mce_href="ie/index.html">EXPLORER <table><tr><td> <![endif]--> <ul> <li><a href="../ie/exampleone.html" mce_href="ie/exampleone.html" title="Example one">example one</a></li> <li><a href="../ie/weft.html" mce_href="ie/weft.html" title="Weft fonts">weft fonts</a></li> <li><a href="../ie/exampletwo.html" mce_href="ie/exampletwo.html" title="Vertical align">vertical align</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a class="hide" href="../opacity/index.html" mce_href="opacity/index.html">OPACITY</a> <!--[if lte IE 6]> <a href="../opacity/index.html" mce_href="opacity/index.html">OPACITY <table><tr><td> <![endif]--> <ul class="left"> <li><a class="hide" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK</a> <!--[if lte IE 6]> <a class="sub" href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">< HOVER/CLICK <table><tr><td> <![endif]--> <ul class="left"> <li><a href="../menu/form.html" mce_href="menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" mce_href="menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a href="../menu/hover_click.html" mce_href="menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> <li><a href="../opacity/colours.html" mce_href="opacity/colours.html" title="colour wheel">opaque colours</a></li> <li><a href="../opacity/picturemenu.html" mce_href="opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li> <li><a href="../opacity/png.html" mce_href="opacity/png.html" title="partial opacity">partial opacity</a></li> <li><a href="../opacity/png2.html" mce_href="opacity/png2.html" title="partial opacity II">partial opacity II</a></li> </ul> <!--[if lte IE 6]> </td></tr></table> </a> <![endif]--> </li> </ul> </div> </body> </html> <!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>二级菜单</title> <mce:style type="text/css"><!-- /* 整体设置*/ #menu { margin:0; padding:0; width:610px; list-style-type:none; font:14px Arial; } #menu li { float:left; padding:0; margin:0 1px 0 0; width:150px; } /* 设置菜单项*/ #menu li dl { width:150px;/*ie6*/ margin: 0; padding: 0 0 10px 0; background: #cb6 url(images/bottom.gif) no-repeat bottom left; } #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */ #menu li dt { margin:0; padding: 5px; text-align:center; border-bottom:1px solid #b00; background: } #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;} #menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;} #menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;} #menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;} #menu li dt a ,#menu li dt a:visited { display:block; color:#333; text-decoration:none; } /* 设置菜单项的dd */ #menu li dd { margin:0; padding:0; color: #fff; background: #47a; } #menu li dd.last { border-bottom:1px solid #b00; } #menu li dd a, #menu li dd a:visited { display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; background: #47a url(images/arrow.gif) no-repeat 10px 10px; height:1em; } /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd , #menu li a:hover dd { display:block;} #menu li:hover, #menu li a:hover { border:0;}/*ie6*/ #menu li dd a:hover { background: #147; color:#9cf; } /*针对ie6的设置*/ #menu table { border-collapse:collapse; padding:0; margin:-1px; font-size:1em; } --></mce:style><style type="text/css" mce_bogus="1">/* 整体设置*/ #menu { margin:0; padding:0; width:610px; list-style-type:none; font:14px Arial; } #menu li { float:left; padding:0; margin:0 1px 0 0; width:150px; } /* 设置菜单项*/ #menu li dl { width:150px;/*ie6*/ margin: 0; padding: 0 0 10px 0; background: #cb6 url(images/bottom.gif) no-repeat bottom left; } #menu li dt a,#menu li dd a{ display:block;} /* 设置菜单项的dt */ #menu li dt { margin:0; padding: 5px; text-align:center; border-bottom:1px solid #b00; background: } #menu li dt.orange { background:#fa5 url(images/top.gif) no-repeat top left;} #menu li dt.yellow { background:#ee5 url(images/top.gif) no-repeat top left;} #menu li dt.green { background:#5e5 url(images/top.gif) no-repeat top left;} #menu li dt.blue { background:#5cf url(images/top.gif) no-repeat top left;} #menu li dt a ,#menu li dt a:visited { display:block; color:#333; text-decoration:none; } /* 设置菜单项的dd */ #menu li dd { margin:0; padding:0; color: #fff; background: #47a; } #menu li dd.last { border-bottom:1px solid #b00; } #menu li dd a, #menu li dd a:visited { display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; background: #47a url(images/arrow.gif) no-repeat 10px 10px; height:1em; } /*关闭子菜单*/ #menu li dd { display:none;} /* 设置鼠标响应 */ #menu li:hover dd , #menu li a:hover dd { display:block;} #menu li:hover, #menu li a:hover { border:0;}/*ie6*/ #menu li dd a:hover { background: #147; color:#9cf; } /*针对ie6的设置*/ #menu table { border-collapse:collapse; padding:0; margin:-1px; font-size:1em; }</style> </head> <body> <ul id="menu"> <li> <!--[if lte IE 6]><a href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="orange"><a href="#" mce_href="#">Artech Studio</a></dt> <dd><a href="#" mce_href="#">Web Dev</a></dd> <dd><a href="#" mce_href="#">Web Design</a></dd> <dd><a href="#" mce_href="#">Books</a></dd> <dd class="last"><a href="#" mce_href="#">Contact Us</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="yellow"><a href="#" mce_href="#">Artech Store</a></dt> <dd><a href="#" mce_href="#">Books</a></dd> <dd><a href="#" mce_href="#">DVDs</a></dd> <dd><a href="#" mce_href="#">Movies</a></dd> <dd class="last"><a href="#" mce_href="#">Service</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="green"><a href="#" mce_href="#">Artech Achi</a></dt> <dd><a href="#" mce_href="#">Landscape</a></dd> <dd><a href="#" mce_href="#">Plan</a></dd> <dd><a href="#" mce_href="#">Design</a></dd> <dd class="last"><a href="#" mce_href="#">Maps</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#nogo" mce_href="#nogo"><table><tr><td><![endif]--> <dl> <dt class="blue"><a href="#" mce_href="#">Artech Science</a></dt> <dd><a href="#" mce_href="#">Physics</a></dd> <dd><a href="#" mce_href="#">Maths</a></dd> <dd><a href="#" mce_href="#">Chemistry</a></dd> <dd class="last"><a href="#" mce_href="#">Courses</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </body> </html>