几款纯div+css制作的弹出菜单标准且无js

?鸿?? ??绋?缃? http://www.jucoder.com

1.??瀹逛?浼??よ?

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>css????婕?绀?lt;/title>

<!--

*{margin:0;padding:0;border:0;}

body {

?font-family: arial, 瀹?浣?, serif;

??????? font-size:12px;

}

#nav {

? line-height: 24px;? list-style-type: none; background:#666;

}

#nav a {

?display: block; width: 80px; text-align:center;

}

#nav a:link? {

?color:#666; text-decoration:none;

}

#nav a:visited? {

?color:#666;text-decoration:none;

}

#nav a:hover? {

?color:#FFF;text-decoration:none;font-weight:bold;

}

#nav li {

?float: left; width: 80px; background:#CCC;

}

#nav li a:hover{

?background:#999;

}

#nav li ul {

?line-height: 27px;? list-style-type: none;text-align:left;

?left: -999em; width: 180px; position: absolute;

}

#nav li ul li{

?float: left; width: 180px;

?background: #F6F6F6;

}

#nav li ul a{

?display: block; width: 180px;w/idth: 156px;text-align:left;padding-left:24px;

}

#nav li ul a:link? {

?color:#666; text-decoration:none;

}

#nav li ul a:visited? {

?color:#666;text-decoration:none;

}

#nav li ul a:hover? {

?color:#F3F3F3;text-decoration:none;font-weight:normal;

?background:#C00;

}

#nav li:hover ul {

?left: auto;

}

#nav li.sfhover ul {

?left: auto;

}

#content {

?clear: left;

}

-->

</style>

function menuFix() {

?var sfEls = document.getElementById("nav").getElementsByTagName("li");

?for (var i=0; i<sfEls.length; i++) {

? sfEls[i].慰nm慰use慰ver=function() {

? this.className+=(this.className.length>0? " ": "") + "sfhover";

? }

? sfEls[i].onMouseDown=function() {

? this.className+=(this.className.length>0? " ": "") + "sfhover";

? }

? sfEls[i].onMouseUp=function() {

? this.className+=(this.className.length>0? " ": "") + "sfhover";

? }

? sfEls[i].慰nm慰use慰ut=function() {

? this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"),

"");

? }

}

window.慰nl慰ad=menuFix;

//--><!]]></script>

</head>

<body>

?<ul>

?<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >浜у??涓?</a></li>

?</ul>

</li>

?<ul>

?</ul>

</li>

?<ul>

?</ul>

</li>

?<ul>

?</ul>

</li>

?<ul>

?</ul>

</li>

?<ul>

?</ul>

</li>

</ul>

</body>

</html>

涓??????烘????锛?浜?绾?ropdown寮瑰?鸿????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>浜?绾?ropdown寮瑰?鸿????--A CROSS BROWSER Drop DOWN CASCADING VALIDATING MENU</title>

.menu {

font-family: arial, sans-serif;

width:750px;

margin:0;

margin:50px 0;

}

.menu ul {

padding:0;

margin:0;

list-style-type: none;

}

.menu ul li {

float:left;

position:relative;

}

.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;

}

.menu ul li ul {

display: none;

}

.menu ul li:hover a {

color:#fff;

background:#b3ab79;

}

.menu ul li:hover ul {

display:block;

position:absolute;

top:31px;

left:0;

width:105px;

}

.menu ul li:hover ul li a {

display:block;

background:#faeec7;

color:#000;

}

.menu ul li:hover ul li a:hover {

background:#dfc184;

color:#000;

}

</style>

<!--[if lte IE 6]>

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 {

color:#fff;

background:#b3ab79;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:32px;

left:0;

width:105px;

}

.menu ul li a:hover ul li a {

background:#faeec7;

color:#000;

}

.menu ul li a:hover ul li a:hover {

background:#dfc184;

color:#000;

}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class="hide" href="../menu/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >DEMOS</a>

<!--[if lte IE 6]>

<a href="../menu/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >DEMOS

<![endif]-->

??? <ul>

??? <li><a href="../menu/zero_dollars.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="The zero dollar ads page">zero dollars</a></li>

??? <li><a href="../menu/embed.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Wrapping text around images">wrapping text</a></li>

??? <li><a href="../menu/form.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Styling forms">styled form</a></li>

??? <li><a href="../menu/nodots.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Removing active/focus borders">active focus</a></li>

??? <li><a href="../menu/shadow_boxing.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Multi-position drop shadow">shadow boxing</a></li>

??? <li><a href="../menu/old_master.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Image Map for detailed information">image map</a></li>

??? <li><a href="../menu/bodies.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="fun with background images">fun backgrounds</a></li>

??? <li><a href="../menu/fade_scroll.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="fade-out scrolling">fade scrolling</a></li>

??? <li><a href="../menu/em_images.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MENUS</a>

<!--[if lte IE 6]>

<a href="index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MENUS

<![endif]-->

??? <ul>

??? <li><a href="spies.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a coded list of spies">spies menu</a></li>

??? <li><a href="vertical.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a horizontal vertical menu">vertical menu</a></li>

??? <li><a href="expand.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="an enlarging unordered list">enlarging list</a></li>

??? <li><a href="enlarge.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="an unordered list with link images">link images</a></li>

??? <li><a href="cross.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="non-rectangular links">non-rectangular</a></li>

??? <li><a href="jigsaw.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="jigsaw links">jigsaw links</a></li>

??? <li><a href="circles.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LAYOUTS</a>

<!--[if lte IE 6]>

<a href="../layouts/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LAYOUTS

<![endif]-->

??? <ul>

??? <li><a href="../layouts/bodyfix.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 1</a></li>

??? <li><a href="../layouts/body2.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 2</a></li>

??? <li><a href="../layouts/body4.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 3</a></li>

??? <li><a href="../layouts/body5.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 4</a></li>

??? <li><a href="../layouts/minimum.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >BOXES</a>

<!--[if lte IE 6]>

<a href="../boxes/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >BOXES

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class="hide" href="../mozilla/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MOZILLA</a>

<!--[if lte IE 6]>

<a href="../mozilla/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MOZILLA

<![endif]-->

??? <ul>

??? <li><a href="../mozilla/dropdown.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="A drop down menu">drop down menu</a></li>

??? <li><a href="../mozilla/cascade.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="A cascading menu">cascading menu</a></li>

??? <li><a href="../mozilla/content.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Using content:">content:</a></li>

??? <li><a href="../mozilla/moxbox.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title=":hover applied to a div">mozzie box</a></li>

??? <li><a href="../mozilla/rainbow.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="I can build a rainbow">rainbow box</a></li>

??? <li><a href="../mozilla/snooker.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Snooker cue">snooker cue</a></li>

??? <li><a href="../mozilla/target.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Target Practise">target practise</a></li>

??? <li><a href="../mozilla/splittext.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Two tone headings">two tone headings</a></li>

??? <li><a href="../mozilla/shadow_text.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >EXPLORER</a>

<!--[if lte IE 6]>

<a href="../ie/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >EXPLORER

<![endif]-->

??? <ul>

??? <li><a href="../ie/exampleone.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Example one">example one</a></li>

??? <li><a href="../ie/weft.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Weft fonts">weft fonts</a></li>

??? <li><a href="../ie/exampletwo.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >OPACITY</a>

<!--[if lte IE 6]>

<a href="../opacity/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >OPACITY

<![endif]-->

??? <ul>

??? <li><a href="../opacity/colours.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="colour wheel">opaque colours</a></li>

??? <li><a href="../opacity/picturemenu.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a menu using opacity">opaque menu</a></li>

??? <li><a href="../opacity/png.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="partial opacity">partial opacity</a></li>

??? <li><a href="../opacity/png2.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="partial opacity II">partial opacity II</a></li>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>

浜???涓?绾?ropdown寮瑰?鸿????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>涓?绾?ropdown寮瑰?鸿????</title>

.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;}

.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]>

.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>

<ul>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? <li><a class="hide" href="../menu/hover_click.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

? <!--[if lte IE 6]>

? <a class="sub" href="../menu/hover_click.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Hover/click with no active/focus borders">HOVER/CLICK >

? <table><tr><td>

? <![endif]-->

??????? <ul>

??????????? <li><a href="../menu/form.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Styling forms">styled form</a></li>

??????????? <li><a href="../menu/nodots.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Removing active/focus borders">active focus</a></li>

??????????? <li><a href="../menu/hover_click.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

? <!--[if lte IE 6]>

? <table><tr><td>

? <![endif]-->

??????? <ul class="left">

??????? </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>

涓???flyout-绔???涓?绾у脊?鸿????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>flyout-绔???涓?绾у脊?鸿????</title>

.menu {font-family: arial, sans-serif; width:106px; height:150px; 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 #aaa; 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;}

.menu ul li:hover a {color:#fff; background:#36f;}

.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; 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:#eee; 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;}

</style>

<!--[if lte IE 6]>

.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:0; left:105px; 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:#eee; 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;}

</style>

<![endif]-->

</head>

<body>

?<ul>

?<li><a class="hide" href="../menu/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >DEMOS</a>

?<!--[if lte IE 6]>

?<a href="../menu/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >DEMOS

?<table><tr><td>

?<![endif]-->

? <ul>

? <li><a href="../menu/zero_dollars.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="The zero dollar ads page">zero dollars</a></li>

? <li><a href="../menu/embed.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Wrapping text around images">wrapping text</a></li>

? <li><a href="../menu/form.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Styling forms">styled form</a></li>

? <li><a href="../menu/nodots.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Removing active/focus borders">active focus</a></li>

? <li><a class="hide" href="../menu/hover_click.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Hover/click with no active/focus borders">HOVER/CLICK ></a>

? <!--[if lte IE 6]>

? <table><tr><td>

? <![endif]-->

?? <ul>

?? <li><a href="../menu/form.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Styling forms">styled form</a></li>

?? <li><a href="../menu/nodots.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Removing active/focus borders">active focus</a></li>

?? <li><a href="../menu/hover_click.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Multi-position drop shadow">shadow boxing</a></li>

? <li><a href="../menu/old_master.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Image Map for detailed information">image map</a></li>

? <li><a href="../menu/bodies.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="fun with background images">fun backgrounds</a></li>

? <li><a href="../menu/fade_scroll.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="fade-out scrolling">fade scrolling</a></li>

? <li><a href="../menu/em_images.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MENUS</a>

?<!--[if lte IE 6]>

?<a href="index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MENUS

?<table><tr><td>

?<![endif]-->

? <ul>

? <li><a href="spies.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a coded list of spies">spies menu</a></li>

? <li><a href="vertical.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a horizontal vertical menu">vertical menu</a></li>

? <li><a href="expand.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="an enlarging unordered list">enlarging list</a></li>

? <li><a href="enlarge.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="an unordered list with link images">link images</a></li>

? <li><a href="cross.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="non-rectangular links">non-rectangular</a></li>

? <li><a href="jigsaw.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="jigsaw links">jigsaw links</a></li>

? <li><a href="circles.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LAYOUTS</a>

?<!--[if lte IE 6]>

?<a href="../layouts/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >LAYOUTS

?<table><tr><td>

?<![endif]-->

? <ul>

? <li><a href="../layouts/bodyfix.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 1</a></li>

? <li><a href="../layouts/body2.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 2</a></li>

? <li><a href="../layouts/body4.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 3</a></li>

? <li><a href="../layouts/body5.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Cross browser fixed layout">Fixed 4</a></li>

? <li><a href="../layouts/minimum.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >BOXES</a>

?<!--[if lte IE 6]>

?<a href="../boxes/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >BOXES

?<table><tr><td>

?<![endif]-->

? <ul>

? </ul>

?<!--[if lte IE 6]>

?</td></tr></table>

?</a>

?<![endif]-->

?</li>

?<li><a class="hide" href="../mozilla/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MOZILLA</a>

?<!--[if lte IE 6]>

?<a href="../mozilla/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >MOZILLA

?<table><tr><td>

?<![endif]-->

? <ul>

? <li><a href="../mozilla/dropdown.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="A drop down menu">drop down menu</a></li>

? <li><a href="../mozilla/cascade.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="A cascading menu">cascading menu</a></li>

? <li><a href="../mozilla/content.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Using content:">content:</a></li>

? <li><a href="../mozilla/moxbox.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title=":hover applied to a div">mozzie box</a></li>

? <li><a href="../mozilla/rainbow.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="I can build a rainbow">rainbow box</a></li>

? <li><a href="../mozilla/snooker.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Snooker cue">snooker cue</a></li>

? <li><a href="../mozilla/target.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Target Practise">target practise</a></li>

? <li><a href="../mozilla/splittext.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Two tone headings">two tone headings</a></li>

? <li><a href="../mozilla/shadow_text.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >EXPLORER</a>

?<!--[if lte IE 6]>

?<a href="../ie/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >EXPLORER

?<table><tr><td>

?<![endif]-->

? <ul>

? <li><a href="../ie/exampleone.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Example one">example one</a></li>

? <li><a href="../ie/weft.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="Weft fonts">weft fonts</a></li>

? <li><a href="../ie/exampletwo.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" 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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >OPACITY</a>

?<!--[if lte IE 6]>

?<a href="../opacity/index.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >OPACITY

?<table><tr><td>

?<![endif]-->

?<ul>

?<li><a href="../opacity/colours.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="colour wheel">opaque colours</a></li>

?<li><a href="../opacity/picturemenu.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="a menu using opacity">opaque menu</a></li>

?<li><a href="../opacity/png.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="partial opacity">partial opacity</a></li>

?<li><a href="../opacity/png2.html" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="partial opacity II">partial opacity II</a></li>

?</ul>

?<!--[if lte IE 6]>

?</td></tr></table>

?</a>

?<![endif]-->

?</li>

?</ul>

</div>

</body>

</html>

????dropline-姘村钩涓?绾фí??寮瑰?鸿????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>dropline-姘村钩涓?绾фí??寮瑰?鸿????</title>

.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;}

.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]>

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>

<ul>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

? <!--[if lte IE 6]>

? <table><tr><td>

? <![endif]-->

??????? <ul class="right_side">

??????? </ul>

??? <!--[if lte IE 6]>

??? </td></tr></table>

? </a>

? <![endif]-->

??? </li>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul class="right_side">

??? </ul>

<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<!--[if lte IE 6]>

<![endif]-->

??? <ul class="right_side">

? <!--[if lte IE 6]>

? <table><tr><td>

? <![endif]-->

??????? <ul class="left_side">

??????? </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>

浜???upmenu-姘村钩绔?寮瑰??涓?涓?绾у脊?鸿????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>upmenu-姘村钩绔?寮瑰??涓?涓?绾у脊?鸿????</title>

.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;}

.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]>

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>

<ul>

<!--[if lte IE 6]>

<![endif]-->

??? <ul>

??? </ul>

?村?? http://www.jucoder.com

几款纯div+css制作的弹出菜单标准且无js

继续阅读

css中伪类与伪元素的区别

谈谈css的伪类和伪元素

伪类与伪元素的区别伪类与伪元素的区别

web前端布局练手项目

CSS----对字号的控制:Points, ems, pixels, 及其它单位,关键字,比例参数

赶工心得（一）

（C# 编程指南）

两种清除浮动的方法

如何成为一名.net 工程师?

tabpanel 使用问题

C#多线程——前台线程和后台线程

CSS之折叠菜单

DOM下元素 offset client scroll 相关属性简介

Android – ListView 中添加按钮，动态删除添加ItemView的操作

IE8 CSS设置DIV居中，添加“margin:0 auto”

Small tricks