您的位置: 首页 > 软件教程 > DIV+CSS教程专题 > 完全CSS下拉菜单,只用CSS,纯CSS构筑!

完全CSS下拉菜单,只用CSS,纯CSS构筑!

6.8分
出处:网络 时间:2012-07-17

您可能感兴趣的话题: CSS  

核心提示:纯CSS构筑的下拉导航菜单!

看看CSS代码,要注意认真看,好好研究哦!

[code]<style type="text/css">

.menu {

font-family: verdana, sans-serif;

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;

}

/* specific 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>

<!--[if lte IE 6]>

<style type="text/css">

.menu ul li a:hover {

color:#fff;

background:#bd8d5e;

}

.menu ul li a:hover ul {

display:block;

position:absolute;

top:3em;

left:0;

background:#fff;

margin-top:0;

marg\in-top:1px;

}

.menu ul li a:hover ul li a {

display:block;

background:#dbe4ab;

color:#000;

height:auto;

line-height:1.5em;

padding:5px 10px;

width:150px;

w\idth:129px;

}

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

background:#c9c9a7;

}

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

visibility:hidden;

position:absolute;

height:0;

width:0;

}

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

background:#c9c9a7; color:#000;

}

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

visibility:visible;

position:absolute;

top:0;

color:#000;

left:150px;

}

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

left:-150px;

}

</style>

<![endif]-->[/code][button value="复制代码"]

下面再看看XHTML代码,同样要认真理解。

[code]<div class="menu">

<ul>

<li><a class="drop" href="http://www.duote.com/">DEMOS

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">zero dollars advertising page</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">wrapping text around images</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">styled form</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">active focus</a></li>

<li><a class="drop" href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">hover/click with no borders

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">styled form</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">removing active/focus borders</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">hover/click</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li class="upone"><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">shadow boxing</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">image map for detailed information</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">fun with background images</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">fade scrolling</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">em image sizes compared</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.duote.com/">BOXES

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">a coded list of spies</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">vertical menu</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">enlarging unordered list</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">link images</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">non-rectangular</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">jigsaw links</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">circular links</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.duote.com/">MOZILLA

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">drop down menu</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">cascading menu</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">content:</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">mozzie box</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">I can build a rainbow with transparent borders</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">a snooker cue using border art</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">target practise</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">two tone headings</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">shadow text</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.duote.com/">EXPLORER

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">the first example for Internet Explorer</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">weft fonts</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">vertically aligning text</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.duote.com/">OPACITY

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">a colour wheel using opaque colours</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">a menu using opacity</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">partial opacity</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">partial opacity II</a></li>

<li><a class="drop" href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">HOVER/CLICK

<!--[if IE 7]><!-->

</a>

<!--<![endif]-->

<table><tr><td>

<ul class="left">

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">styled form</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">removing active/focus borders</a></li>

<li><a href="http://www.duote.com/" title="完全CSS下拉菜单,只用CSS,纯CSS构筑!">hover/click</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

</ul>

</div>[/code][button value="复制代码"]

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
HTML的中文叫做“超文本标记语言”。是用来... [详细]
Dreamweaver是网页制作和管理的所见... [详细]