CSS垂直菜单
<style type="text/css">/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 180px;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% ’Trebuchet MS’, ’Lucida Grande’, Arial, sans-serif;
}
#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 180px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
font-size: 12px;
}
* html #ddblueblockmenu li a{ /*IE only */
width: 180px; /*IE 5*/
w\idth: 180px; /*185px minus all left/right paddings and margins*/
}
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 5px;
background-color: black;
font-size: 14px;
font-weight: bold;
width: 180px;
}
</style>
<div id="ddblueblockmenu">
<div class="menutitle">IDTcn.com</div>
<ul>
<li><a href="http://www.idtcn.com/">深圳IDT设计室</a></li>
<li><a href="http://seo.idtcn.com/">搜索优化(SEO)</a></li>
<li><a href="http://food.sz95555.com/">家常菜(Food)</a></li>
<li><a href="http://idc.idtcn.com/">数据中心(IDC)</a></li>
<li><a href="http://library.idtcn.com/">网站重构(CSS/Script)</a></li>
</ul>
<div class="menutitle">ASP技术中文网</div>
<ul>
<li><A href="http://www.szasp.cn/HTML/30/31/">ASP/ASP.NET专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/33/">JSP专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/32/">PHP专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/35">XML专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/38">AJAX 专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/46/">CGI专区</A></li>
<li><A href="http://www.szasp.cn/HTML/30/37/">网页教程</A></li>
<li><A href="http://www.szasp.cn/HTML/30/36/">脚本编程</A></li>
<li style="border-bottom:1px #000000 solid"><A href="http://www.szasp.cn/HTML/30/34/">Python专区</A></li>
</ul>
</div>
<br><br>----<br><br><a href="http://library.idtcn.com" _fcksavedurl="http://library.idtcn.com" target="_blank">更多效果请访问http://library.idtcn.com</a>
页:
[1]