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