斜邊水平CSS菜單

來源:互聯網
上載者:User
<style type="text/css">
#slantedmenu{
font-weight: bold;
font-size: 90%;
}
#slantedmenu:after{ /*在FF中增加菜單末尾的邊距*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#slantedmenu ul{
text-indent: 10px;
padding: 3px 0;
margin: 0;
background-color: #e0e0e0;
border: 1px solid #bebebe;
text-align: left; /*可以設定為"center"來置中功能表項目*/
}
#slantedmenu ul li{
display: inline;
}
#slantedmenu ul li a{
color: #494949;
padding: 3px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background: transparent url(media/slantdivider.gif) top right no-repeat;
}
#slantedmenu ul li a:visited{
color: #494949;
}
#slantedmenu ul li a:hover{
color: black;
}
</style>
<div id="slantedmenu">
<ul>
<li><a href="#">Dynamic Drive</a> </li>
<li><a href="#">CSS Library</a> </li>
<li><a href="#">CSS Drive</a> </li>
<li><a href="#">JavaScript Kit</a> </li>
<li><a href="#">Coding Forums</a> </li>
<li><a href="#">Button Maker</a> </li>
</ul>
</div>
 
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.