完全使用CSS制作下拉菜单

wapysun

浏览: 21481009 次
性别:
来自: 杭州

最近访客更多访客>>

devcang

hunankeda110

辽东小小

apex53

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-06 ( 77)
2012-05 ( 587)
2012-04 ( 177)
更多存档...

CSS HTML IE XHTML

在Blueidea看到的一段完全使用CSS制作的下拉菜单，绝对的强~因此收藏了一下。

这个样式最大的收获就是CSS也可以像JS一样，使用例如：div.open，a.outer:hover之类实现类似于MoveOut的效果，看完这段CSS样式代码，受益非浅啊~~

window.attachEvent("onload",function (){AutoSizeDIV('CODE_6509')})

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[<!ELEMENTa(#PCDATA|table)*>]>
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="application/xhtml+xml;charset=UTF-8"/>
<title>纯CSS下拉菜单，兼容IE和FF</title>

<styletype="text/css">
body{color:#fff;}
#wrapper{color:#000;}
.red{color:#c00;}
#info{margin-top:20px;}
#infoh1{font-size:3em;text-align:center;font-family:georgia,"timesnewroman",serif;}

#head{height:145px;border:0;}

#positioner{clear:both;position:relative;left:1px;z-index:100;}
#ads{position:relative;z-index:10;}
.menu{display:none;}
#noniemenu{position:absolute;}

#noniemenu.holderul{padding:0;margin:0;}
#noniemenu.holderulli{list-style-type:none;}
#noniemenu.holderli{}
#noniemenu.holderliul{display:none;}
#noniemenu.holderli:hover>ul#a3{display:block;position:absolute;left:105px;margin-top:-20px;border:1pxsolid#000;}
#noniemenu.holder.bold{font-weight:bold;}

#noniemenu.holder{
color:#fff;
width:104px;
height:18px;
display:block;
overflow:hidden;
float:left;
border:1pxsolid#000;
margin-right:1px;
font-size:10px;
}
#noniemenu.holder:hover{
height:auto;
}
#noniemenua.outer,#noniemenua.outer:visited{
color:#fff;
width:104px;
line-height:18px;
display:block;
background:#e09222;
text-align:center;
text-decoration:none;
font-family:verdana,arial,sans-serif;
}
#noniemenua.outer:hover{
background:#697210;
overflow:visible;
}
#noniemenudiv.open{display:none;}
#noniemenua.inner,#noniemenua.inner:visited{
display:block;
width:104px;
height:18px;
line-height:18px;
border-bottom:1pxsolid#000;
text-decoration:none;
color:#000;
background:#eee;
text-align:center;
}
#noniemenua.second{font-weight:bold;}
#noniemenua.inner:hover{
background:#add;
}
</style>





</head>

<body>

<divid="wrapper">

<divid="head">

<divid="positioner">

<divclass="menu">
<aclass="outer"href="../menu/index.html">DEMOS
<tableclass="first"><tr><td>
<aclass="inner"href="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollars</a>
<aclass="inner"href="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtext</a>
<aclass="inner"href="../menu/form.html"title="Stylingforms">styledform</a>
<aclass="inner"href="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a>
<aclass="innersecond"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">HOVER/CLICK>
<table><tr><td>
<aclass="inner"href="../menu/form.html"title="Stylingforms">styledform</a>
<aclass="inner"href="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a>
<aclass="inner"href="../menu/hover_click.html"title="Hover/clickwithnoactive/focusborders">hover/click</a>
</td></tr></table>
</a>
<aclass="inner"href="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a>
<aclass="inner"href="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemap</a>
<aclass="inner"href="../menu/bodies.html"title="funwithbackgroundimages">funbackgrounds</a>
<aclass="inner"href="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a>
<aclass="inner"href="../menu/em_images.html"title="emsizeimagescompared">emsizedimages</a>
</td></tr></table>
</a>

<aclass="outer"href="index.html">MENUS
<tableclass="first"><tr><td>
<aclass="inner"href="spies.html"title="acodedlistofspies">spiesmenu</a>
<aclass="inner"href="vertical.html"title="ahorizontalverticalmenu">verticalmenu</a>
<aclass="inner"href="expand.html"title="anenlargingunorderedlist">enlarginglist</a>
<aclass="inner"href="enlarge.html"title="anunorderedlistwithlinkimages">linkimages</a>
<aclass="inner"href="cross.html"title="non-rectangularlinks">non-rectangular</a>
<aclass="inner"href="jigsaw.html"title="jigsawlinks">jigsawlinks</a>
<aclass="inner"href="circles.html"title="circularlinks">circularlinks</a>
</td></tr></table>
</a>

<aclass="outer"href="../layouts/index.html">LAYOUTS
<tableclass="first"><tr><td>
<aclass="inner"href="../layouts/bodyfix.html"title="Crossbrowserfixedlayout">Fixed1</a>
<aclass="inner"href="../layouts/body2.html"title="Crossbrowserfixedlayout">Fixed2</a>
<aclass="inner"href="../layouts/body4.html"title="Crossbrowserfixedlayout">Fixed3</a>
<aclass="inner"href="../layouts/body5.html"title="Crossbrowserfixedlayout">Fixed4</a>
<aclass="inner"href="../layouts/minimum.html"title="Asimpleminimumwidthlayout">minimumwidth</a>
</td></tr></table>
</a>

<aclass="outer"href="../boxes/index.html">BOXES
<tableclass="first"><tr><td>
<aclass="inner"href="../boxes/scrollbars.html"title="Leftscrollbars">leftscroll</a>
<aclass="inner"href="../boxes/floatfix.html"title="IE63pxfloatfix">IE63pxfix</a>
<aclass="inner"href="../boxes/snazzy.html"title="Snazzyborders">snazzyborders</a>
<aclass="inner"href="../boxes/krazy.html"title="KrazyKorners">krazykorners</a>
<aclass="inner"href="../boxes/outside.html"title="PercentagePLUSpixels">%PLUSpixels</a>
<aclass="inner"href="../boxes/minwidth.html"title="min-widthforIE">IEmin-width</a>
<aclass="inner"href="../boxes/minheight.html"title="min-heightforIE">IEmin-height</a>
</td></tr></table>
</a>

<aclass="outer"href="../mozilla/index.html">MOZILLA
<tableclass="first"><tr><td>
<aclass="inner"href="../mozilla/dropdown.html"title="Adropdownmenu">dropdownmenu</a>
<aclass="inner"href="../mozilla/cascade.html"title="Acascadingmenu">cascadingmenu</a>
<aclass="inner"href="../mozilla/content.html"title="Usingcontent:">content:</a>
<aclass="inner"href="../mozilla/moxbox.html"title=":hoverappliedtoadiv">mozziebox</a>
<aclass="inner"href="../mozilla/rainbow.html"title="Icanbuildarainbow">rainbowbox</a>
<aclass="inner"href="../mozilla/snooker.html"title="Snookercue">snookercue</a>
<aclass="inner"href="../mozilla/target.html"title="TargetPractise">targetpractise</a>
<aclass="inner"href="../mozilla/splittext.html"title="Twotoneheadings">twotoneheadings</a>
<aclass="inner"href="../mozilla/shadow_text.html"title="Shadowtext">shadowtext</a>
</td></tr></table>
</a>

<aclass="outer"href="../ie/index.html">EXPLORER
<tableclass="first"><tr><td>
<aclass="inner"href="../ie/exampleone.html"title="Exampleone">exampleone</a>
<aclass="inner"href="../ie/weft.html"title="Weftfonts">weftfonts</a>
<aclass="inner"href="../ie/exampletwo.html"title="Verticalalign">verticalalign</a>
</td></tr></table>
</a>

<aclass="outer"href="../opacty/index.html">OPACITY
<tableclass="first"><tr><td>
<aclass="inner"href="../opacty/colours.html"title="colourwheel">opaquecolours</a>
<aclass="inner"href="../opacty/picturemenu.html"title="amenuusingopacity">opaquemenu</a>
<aclass="inner"href="../opacty/png.html"title="partialopacity">partialopacity</a>
<aclass="inner"href="../opacty/png2.html"title="partialopacityII">partialopacityII</a>
</td></tr></table>
</a>

</div>

分享到：