CSS 菜單添加箭頭

來源:互聯網
上載者:User

1.css

View Code

.tabset{    position: relative;    overflow:hidden;    padding:2px 0 0;}.tabset .b{    width:100%;    overflow:hidden;    height:1px;    font-size:0;    line-height:0;    background:url(sep1.png) repeat-x;}.tabset ul{    display: block;    overflow:hidden;    padding:0;    list-style:none;    margin:0;}.tabset ul li{    float:left;    margin:0 22px;    padding: 0 0 17px 0;    font:bold 21px/23px Arial,Helvetica,sans-serif;    letter-spacing:-1px;    color:#f27021;    position:relative;    text-shadow: 0 0 3px #000000;}.tabset ul li.disable{color:#c57f73;}.tabset ul li em{    position:absolute;    left:40%;    bottom:0;    font-size:0;    line-height:0;    width:14px;    height:11px;}.tabset ul li.active {color:#fff;}.tabset ul li.active em{background:url(bul1.png) no-repeat;}

2.html

        <div class="tabset">                    <ul>                        <li class=''>檔案<em>&nbsp;</em></li>                        <li class='active'>檔案<em>&nbsp;</em></li>                        <li class=''>資訊<em>&nbsp;</em></li>                        <li class=''>市場<em>&nbsp;</em></li>                        <li class=''>其他<em>&nbsp;</em></li>                    </ul>                    <div class="b">                        &nbsp;</div>                </div>

3.效果圖

相關文章

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.