| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS+XHTML代码</title>
</head>
<style type="text/css">
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.menu {
position:relative;
width:750px;
height:2em;
background:#b7c6ac;
border-top:10px solid #b7c6ac;
padding-bottom:1px;
background:#b7c6ac url(http://preview.zcool.com.cn/code/css/menu/012/drop/line.gif) bottom left repeat-x;
margin-bottom:5em;
}
* html .menu {padding-bottom:0;}
.menu ul{
list-style-type:none;
padding:0;
margin:0 0 0 20px;
width:730px;
height:100%;
}
.menu li{
float:left;
}
.menu table{
position:absolute;
border-collapse:collapse;
left:0;
top:0;
}
.menu a, .menu :visited {
color:#fff;
text-decoration:none;
}
.menu a em.lft, .menu :visited em.lft {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/lefta.gif);
border-bottom:1px solid #777;
}
.menu a b, .menu :visited b {
display:block;
font-weight:normal;
float:left;
padding:0 10px;
height:2em;line-height:1.9em;
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/mida.gif);
cursor:pointer;
border-bottom:1px solid #777;
}
.menu a em.rgt, .menu :visited em.rgt {
display:block;
float:left;
width:5px;
height:2em;
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/righta.gif);
border-bottom:1px solid #777;
}
.menu ul ul {
visibility:hidden;
position:absolute;
height:2em;
top:2em;
left:-20px;
width:749px;
border-bottom:1px solid #777;
border-right:1px solid #777;
background:#ccc;
}
.menu :hover {
white-space:normal;
}
.menu a:hover b {
color:#000;
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/midb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.lft {
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu a:hover em.rgt {
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a b
{
color:#000;
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/midb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.lft {
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/leftb.gif);
border-bottom-color:#ccc;
}
.menu li:hover > a em.rgt {
background: transparent url(http://preview.zcool.com.cn/code/css/menu/012/drop/rightb.gif);
border-bottom-color:#ccc;
}
.menu ul li:hover ul,
.menu ul a:hover ul{
display:block;
visibility:visible;
top:2em;
margin-top:1px;
}
.menu ul :hover ul li {
display:block;
border-left:1px solid #777;
background:#ccc;
height:2em;
}
.menu ul :hover ul li a {
display:block;
font-size:0.8em;
height:2em;
line-height:2.5em;
width:auto;
float:left;
color:#444;
padding:0 10px;}
.menu ul :hover ul li a:hover {
color:#c00;
}
</style>
<body>
<div class="menu">
<ul>
<li><a href="#nogo" title="John Constable"><em class="lft"></em><b>John Constable</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Hay Wain">The Hay Wain</a></li>
<li><a href="#nogo" title="Brighton Beach">Brighton Beach</a></li>
<li><a href="#nogo" title="Malvern Hall">Malvern Hall</a></li>
<li><a href="#nogo" title="Salisbury Cathedral">Salisbury Cathedral</a></li>
<li><a href="#nogo" title="Weymouth Bay">Weymouth Bay</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="William Turner"><em class="lft"></em><b>William Turner</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="Fishermen at Sea">Fishermen at Sea</a></li>
<li><a href="#nogo" title="The Shipwreck">The Shipwreck</a></li>
<li><a href="#nogo" title="The Vale of Ashburnham">The Vale of Ashburnham</a></li>
<li><a href="#nogo" title="Crossing the Brook">Crossing the Brook</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Henri Matisse"><em class="lft"></em><b>Henri Matisse</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Girl with Green Eyes">The Girl with Green Eyes</a></li>
<li><a href="#nogo" title="The Dream">The Dream</a></li>
<li><a href="#nogo" title="Woman in Blue">Woman in Blue</a></li>
<li><a href="#nogo" title="The Yellow Dress">The Yellow Dress</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo" title="Paul Cezanne"><em class="lft"></em><b>Paul Cezanne</b><em class="rgt"></em><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo" title="The Large Bathers">The Large Bathers</a></li>
<li><a href="#nogo" title="Onions and Bottles">Onions and Bottles</a></li>
<li><a href="#nogo" title="Mardi Gras">Mardi Gras</a></li>
<li><a href="#nogo" title="Still Life">Still Life</a></li>
<li><a href="#nogo" title="Boy in a Red Waistcoat">Boy in a Red Waistcoat</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
| 
