完全CSS下拉菜单，只用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>

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

[code]<div class="menu">

<ul>

<li><a class="drop" href="http://www.y866.cn/">DEMOS

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="The zero dollar ads page">zero dollars advertising page</a></li>

<li><a href="http://www.y866.cn/" title="Wrapping text around images">wrapping text around images</a></li>

<li><a href="http://www.y866.cn/" title="Styling forms">styled form</a></li>

<li><a href="http://www.y866.cn/" title="Removing active/focus borders">active focus</a></li>

<li><a class="drop" href="http://www.y866.cn/" title="Hover/click with no active/focus borders">hover/click with no borders

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="Styling forms">styled form</a></li>

<li><a href="http://www.y866.cn/" title="Removing active/focus borders">removing active/focus borders</a></li>

<li><a href="http://www.y866.cn/" title="Hover/click with no active/focus borders">hover/click</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li class="upone"><a href="http://www.y866.cn/" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="http://www.y866.cn/" title="Image Map for detailed information">image map for detailed information</a></li>

<li><a href="http://www.y866.cn/" title="fun with background images">fun with background images</a></li>

<li><a href="http://www.y866.cn/" title="fade-out scrolling">fade scrolling</a></li>

<li><a href="http://www.y866.cn/" title="em size images compared">em image sizes compared</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.y866.cn/">BOXES

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="a coded list of spies">a coded list of spies</a></li>

<li><a href="http://www.y866.cn/" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="http://www.y866.cn/" title="an enlarging unordered list">enlarging unordered list</a></li>

<li><a href="http://www.y866.cn/" title="an unordered list with link images">link images</a></li>

<li><a href="http://www.y866.cn/" title="non-rectangular links">non-rectangular</a></li>

<li><a href="http://www.y866.cn/" title="jigsaw links">jigsaw links</a></li>

<li><a href="http://www.y866.cn/" title="circular links">circular links</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.y866.cn/">MOZILLA

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="A drop down menu">drop down menu</a></li>

<li><a href="http://www.y866.cn/" title="A cascading menu">cascading menu</a></li>

<li><a href="http://www.y866.cn/" title="Using content:">content:</a></li>

<li><a href="http://www.y866.cn/" title=":hover applied to a div">mozzie box</a></li>

<li><a href="http://www.y866.cn/" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>

<li><a href="http://www.y866.cn/" title="Snooker cue">a snooker cue using border art</a></li>

<li><a href="http://www.y866.cn/" title="Target Practise">target practise</a></li>

<li><a href="http://www.y866.cn/" title="Two tone headings">two tone headings</a></li>

<li><a href="http://www.y866.cn/" title="Shadow text">shadow text</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.y866.cn/">EXPLORER

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="Example one">the first example for Internet Explorer</a></li>

<li><a href="http://www.y866.cn/" title="Weft fonts">weft fonts</a></li>

<li><a href="http://www.y866.cn/" title="Vertical align">vertically aligning text</a></li>

</ul>

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

<!--[if lte IE 6]>

</a>

<![endif]-->

</li>

<li><a href="http://www.y866.cn/">OPACITY

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

</a>

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

<table><tr><td>

<ul>

<li><a href="http://www.y866.cn/" title="colour wheel">a colour wheel using opaque colours</a></li>

<li><a href="http://www.y866.cn/" title="a menu using opacity">a menu using opacity</a></li>

<li><a href="http://www.y866.cn/" title="partial opacity">partial opacity</a></li>

<li><a href="http://www.y866.cn/" title="partial opacity II">partial opacity II</a></li>

<li><a class="drop" href="http://www.y866.cn/" title="Hover/click with no active/focus borders">HOVER/CLICK

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

</a>

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

<table><tr><td>

<ul class="left">

<li><a href="http://www.y866.cn/" title="Styling forms">styled form</a></li>

<li><a href="http://www.y866.cn/" title="Removing active/focus borders">removing active/focus borders</a></li>

<li><a href="http://www.y866.cn/" title="Hover/click with no active/focus borders">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>