代码如下
复制代码
<div id="menu">
<div class="cond">
<div class="conc">
<div class="conb">
<div class="cona">
<div class="black">
<a class="switch" href="http://www.111cn.net/default.asp?cateID=3" target="_blank">
<span class="white">
<span class="blackc" title="Div+CSS教程">Div+CSS教程</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="cond">
<div class="conc">
<div class="conb">
<div class="cona">
<div class="black">
<a class="switch" href="http://www.111cn.net/default.asp?cateID=9" target="_blank">
<span class="white">
<span class="blackc" title="CSS布局实例">CSS布局实例</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="cond">
<div class="conc">
<div class="conb">
<div class="cona">
<div class="black">
<a class="switch" href="http://www.111cn.net/default.asp?cateID=5" target="_blank">
<span class="white">
<span class="blackc" title="CSS2.0教程">CSS2.0教程</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="cond">
<div class="conc">
<div class="conb">
<div class="cona">
<div class="black">
<a class="switch" href="http://www.111cn.net/css_websites_showcase/" target="_blank">
<span class="white">
<span class="blackc" title="CSS酷站欣赏">CSS酷站欣赏</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="cond">
<div class="conc">
<div class="conb">
<div class="cona">
<div class="black">
<a class="switch" href="http://www.111cn.net/css_template/" target="_blank">
<span class="white">
<span class="blackc" title="CSS模板下载">CSS模板下载</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
我们再看CSS编码：
Example Source Code [www.111cn.net]
#menu {
display:block;
position:relative;
background:#edebdc;
width:112px;
padding:25px;
border:1px solid #000;
margin:0 auto;
}
.white {
position:absolute;
width:100px;
height:20px;
color:#fff;/*www.111cn.net*/
background:#fff;
border-top:1px solid #ffdc56;
border-right:1px solid #957704;
border-bottom:1px solid #937603;
border-left:1px solid #ffdc56;
overflow:hidden;
text-align:center;
}
.blackc {
position:absolute;
top:0;/*www.111cn.net*/
left:0;
width:98px;
height:18px;
color:#000;
font-family:verdana;
font-size:11px;
font-weight:bold;
overflow:hidden;
border-top:1px solid #ffd42e;
border-right:1px solid #caa205;
border-bottom:1px solid #c9a105;
border-left:1px solid #ffd42e;
overflow:hidden;
text-align:center;
line-height:15px;
background:#fc0;
}
.black {
position:relative;
top:0;/*www.111cn.net*/
left:0;
width:102px;
height:22px;
border:1px solid #000;
}
.cona {
position:relative;
top:0;/*www.111cn.net*/
left:0;
width:105px;
height:25px;
border-top:1px solid #d5d3ca;
border-left:1px solid #d5d3ca;
background:#f7f6ef;
}
.conb {
position:relative;
top:0;
left:0;
width:107px;
height:27px;
border-top:1px solid #b8b7af;
border-left:1px solid #b8b7af;
background:#f7f6ef;
}
.conc {
position:relative;
top:0;/*www.111cn.net*/
left:0;
width:109px;
height:29px;
border-top:1px solid #9c9b95;
border-left:1px solid #9c9b95;
background:#f7f6ef;
}
.cond {
position:relative;
top:0;
left:0;
width:111px;
height:31px;
border-top:1px solid #d5d3ca;
border-left:1px solid #d5dc3a;
background:#fff;
margin-top:2px;
}
#menu a.switch:visited {
text-decoration:none;
}
#menu a.switch {
color:#c00;
text-decoration:none;
position:absolute;
}
#menu a.switch:hover {
color:#c00;
background:#edebdc;
cursor:pointer;
}
#menu a.switch:hover .white {
position:absolute;
width:100px;
height:20px;
color:#fff;
background:#fff;
border-bottom:1px solid #ffdc56;
border-left:1px solid #957704;
border-top:1px solid #937603;
border-right:1px solid #ffdc56;
overflow:hidden;
text-align:center;
}
#menu a.switch:hover .blackc {
position:absolute;
top:0;/*www.111cn.net*/
left:0;
width:98px;
height:18px;
color:#000;
font-size:11px;
font-weight:bold;
overflow:hidden;
border-bottom:1px solid #ffd42e;
border-left:1px solid #caa205;
border-top:1px solid #c9a105;
border-right:1px solid #ffd42e;
overflow:hidden;
text-align:center;
line-height:17px;
background:#eb0;
}
