Rss订阅

首页 »Html教程 » 下拉列表css:完全CSS下拉菜单，只用CSS，纯CSS构筑！ »正文

下拉列表css:完全CSS下拉菜单，只用CSS，纯CSS构筑！

来源: 发布时间:星期四, 2009年2月12日浏览:105次评论:0

看看CSS代码

要注意认真看

好好研究哦！

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<styletype=\"text/css\">
.menu{
font-family:verdana,sans-ser

;
width:750px;
position:relative;
font-size:0.85em;
padding-bottom:250px;
}
.menuul{
padding:0;
margin:0;
list-style-type:none;
}
.menuulli{
float:left;
position:relative;
}
.menuullia,.menuullia:visited{
display:block;
text-decoration:none;
color:#000;
width:139px;
height:3em;
color:#000;
border:1pxsolid#fff;
border-width:1px1px00;
background:#dfc184;
padding-left:10px;
line-height:3em;
}
*html.menuullia,.menuullia:visited{
width:149px;
w\\idth:139px;
}
.menuulliul{
display:none;
}
table{
margin:-1px;
border-collapse:collapse;
font-size:1em;
}

/*spec

ictononIEbrowsers*/
.menuulli:hovera{
color:#fff;
background:#bd8d5e;
}
.menuulli:hoverul{
display:block;
position:absolute;
top:3em;
margin-top:1px;
left:0;
width:150px;
}
.menuulli:hoverulliul{
display:none;
}
.menuulli:hoverullia{
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:5px10px;
width:129px
}
.menuulli:hoverullia.drop{
background:#c9c9a7;
}
.menuulli:hoverullia:hover{
background:#c9c9a7;
color:#000;
}
.menuulli:hoverulli:hoverul{
display:block;
position:absolute;
left:150px;
top:0;
width:150px;
}
.menuulli:hoverulli:hoverul.left{
left:-150px;
}
</style>
<!--[

lteIE6]>
<styletype=\"text/css\">
.menuullia:hover{
color:#fff;
background:#bd8d5e;
}
.menuullia:hoverul{
display:block;
position:absolute;
top:3em;
left:0;
background:#fff;
margin-top:0;
marg\\in-top:1px;
}
.menuullia:hoverullia{
display:block;
background:#dbe4ab;
color:#000;
height:auto;
line-height:1.5em;
padding:5px10px;
width:150px;
w\\idth:129px;
}
.menuullia:hoverullia.drop{
background:#c9c9a7;
}
.menuullia:hoverulliaul{
visibility:hidden;
position:absolute;
height:0;
width:0;
}
.menuullia:hoverullia:hover{
background:#c9c9a7;color:#000;
}
.menuullia:hoverullia:hoverul{
visibility:visible;
position:absolute;
top:0;
color:#000;
left:150px;
}
.menuullia:hoverullia:hoverul.left{
left:-150px;
}

</style>
<![end

]-->

下面再看看XHTML代码

同样要认真理解

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
<div

=\"menu\">
<ul>
<li><a

=\"drop\"href=\"http://www.52css.com/\">DEMOS
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"Thezerodollaradspage\">zerodollarsadvertisingpage</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Wrappingtextaroundimages\">wrappingtextaroundimages</a></li>

<li><ahref=\"http://www.52css.com/\"title=\"Stylingforms\">styledform</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Removingactive/focusborders\">activefocus</a></li>
<li><a

=\"drop\"href=\"http://www.52css.com/\"title=\"Hover/clickwithnoactive/focusborders\">hover/clickwithnoborders
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"Stylingforms\">styledform</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Removingactive/focusborders\">removingactive/focusborders</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Hover/clickwithnoactive/focusborders\">hover/click</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
<li

=\"upone\"><ahref=\"http://www.52css.com/\"title=\"Multi-positiondropshadow\">shadowboxing</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"ImageMapfordetailedinformation\">imagemapfordetailedinformation</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"funwithbackgroundimages\">funwithbackgroundimages</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"fade-outscrolling\">fadescrolling</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"emsizeimagescompared\">emimagesizescompared</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
<li><ahref=\"http://www.52css.com/\">BOXES
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"acodedlistofspies\">acodedlistofspies</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"ahorizontalverticalmenu\">verticalmenu</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"anenlargingunorderedlist\">enlargingunorderedlist</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"anunorderedlistwithlinkimages\">linkimages</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"non-rectangularlinks\">non-rectangular</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"jigsawlinks\">jigsawlinks</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"circularlinks\">circularlinks</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
<li><ahref=\"http://www.52css.com/\">MOZILLA
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"Adropdownmenu\">dropdownmenu</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Acascadingmenu\">cascadingmenu</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Usingcontent:\">content:</a></li>

<li><ahref=\"http://www.52css.com/\"title=\":hoverappliedtoadiv\">mozziebox</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Icanbuildarainbow\">Icanbuildarainbowwithtransparentborders</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Snookercue\">asnookercueusingborderart</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"TargetPractise\">targetpractise</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Twotoneheadings\">twotoneheadings</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Shadowtext\">shadowtext</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
<li><ahref=\"http://www.52css.com/\">EXPLORER
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"Exampleone\">thefirstexampleforInternetExplorer</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Weftfonts\">weftfonts</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Verticalalign\">verticallyaligningtext</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
<li><ahref=\"http://www.52css.com/\">OPACITY
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul>
<li><ahref=\"http://www.52css.com/\"title=\"colourwheel\">acolourwheelusingopaquecolours</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"amenuusingopacity\">amenuusingopacity</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"partialopacity\">partialopacity</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"partialopacityII\">partialopacityII</a></li>
<li><a

=\"drop\"href=\"http://www.52css.com/\"title=\"Hover/clickwithnoactive/focusborders\">HOVER/CLICK
<!--[

IE7]><!-->
</a>
<!--<![end

]-->
<table><tr><td>
<ul

=\"left\">
<li><ahref=\"http://www.52css.com/\"title=\"Stylingforms\">styledform</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Removingactive/focusborders\">removingactive/focusborders</a></li>
<li><ahref=\"http://www.52css.com/\"title=\"Hover/clickwithnoactive/focusborders\">hover/click</a></li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->

</li>
</ul>
</td></tr></table>
<!--[

lteIE6]>
</a>
<![end

]-->
</li>
</ul>
</div>

查看最后完成

效果！纯CSS构筑

下拉导航菜单！

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; char<img src='/icons/82186set.gif' />=utf-8\" /><title>52css.com</title><style type=\"text/css\">.menu {font-family: verdana, sans-ser<img src='/icons/82186if.gif' />; width:750px; position:relative; font-size:0.85em;padding-bottom:250px;}.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-decoration:none; color:#000; width:139px; height:3em; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#dfc184; padding-left:10px; line-height:3em;}* html .menu ul li a, .menu ul li a:visited {width:149px;w\\idth:139px;}.menu ul li ul {display: none;}table {margin:-1px; border-collapse:collapse;font-size:1em;}/* spec<img src='/icons/82186if.gif' />ic to non IE browsers */.menu ul li:hover a {color:#fff; background:#bd8d5e;}.menu ul li:hover ul {display:block; position:absolute; top:3em;margin-top:1px;left:0; width:150px;}.menu ul li:hover ul li ul {display: none;}.menu ul li:hover ul li a {display:block; background:#faeec7; color:#000; height:auto; line-height:1.2em; padding:5px 10px; width:129px}.menu ul li:hover ul li a.drop {background:#c9c9a7;}.menu ul li:hover ul li a:hover {background:#c9c9a7; color:#000;}.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:150px; top:0;width:150px;}.menu ul li:hover ul li:hover ul.left {left:-150px;}</style></head><body><ul><li>DEMOS     <ul>    <li>zero dollars advertising page</li>    <li>wrapping text around images</li>    <li>styled form</li>    <li>active focus</li>    <li>hover/click with no borders         <ul>            <li>styled form</li>            <li>removing active/focus borders</li>            <li>hover/click</li>        </ul> <br/><br/>    </li>    <li <img src='/icons/82186class.gif' />=\"upone\">shadow boxing</li>    <li>image map for detailed information</li>    <li>fun with background images</li>    <li>fade scrolling</li>    <li>em image sizes compared</li>    </ul> <br/><br/></li><li>BOXES     <ul>    <li>a coded list of spies</li>    <li>vertical menu</li>    <li>enlarging unordered list</li>    <li>link images</li>    <li>non-rectangular</li>    <li>jigsaw links</li>    <li>circular links</li>    </ul> <br/><br/></li><li>MOZILLA     <ul>    <li>drop down menu</li>    <li>cascading menu</li>    <li>content:</li>    <li>mozzie box</li>    <li>I can build a rainbow with transparent borders</li>    <li>a snooker cue using border art</li>    <li>target practise</li>    <li>two tone headings</li>    <li>shadow text</li>    </ul> <br/><br/></li><li>EXPLORER     <ul>    <li>the first example for Internet Explorer</li>    <li>weft fonts</li>    <li>vertically aligning text</li>    </ul> <br/><br/></li><li>OPACITY     <ul>    <li>a colour wheel using opaque colours</li>    <li>a menu using opacity</li>    <li>partial opacity</li>    <li>partial opacity II</li>    <li>HOVER/CLICK         <ul <img src='/icons/82186class.gif' />=\"left\">            <li>styled form</li>            <li>removing active/focus borders</li>            <li>hover/click</li>        </ul> <br/><br/>    </li>    </ul> <br/><br/></li></ul><br/></body></html>

=\"ubbbuttonrt\">[ 可先修改部分代码再运行查看效果 ]

标签：css下拉框样式下拉框css 下拉列表css

下载文章的 PDF文档电子版离线看

我顶

专注于互联网--专注于架构

首页 »Html教程 » 下拉列表css:完全CSS下拉菜单，只用CSS，纯CSS构筑！ »正文

下拉列表css:完全CSS下拉菜单，只用CSS，纯CSS构筑！

相关文章

读者评论

发表评论

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章