簡單的純css菜單

來源:互聯網
上載者:User
<style>ul {    margin: 0px;    padding: 0px;}ul li {    float: left;    display: inline;    font: 0.9em Arial, Helvetica, sans-serif;    height: 30px;    width: 100px;    list-style: none;}ul li a {    color: #FFF;    text-decoration: none;    line-height: 29px;    width: 91px;    margin: 0px;    padding: 0px 0px 0px 8px;    display: block;    border-right: solid 1px #ccc;    border-bottom:solid 1px #ccc;    background: #808080;}ul li ul li { height:25px; }ul li ul li a {    background: #666;    line-height:24px;}ul li a:hover { background: #666; }ul li ul { visibility: hidden; }ul li:hover ul { visibility: visible; }ul li ul li a:hover { background: #333; }</style><ul>  <li><a href="#">菜單一</a></li>  <li><a href="#">菜單二</a>    <ul>      <li><a href="#">子功能表一</a></li>      <li><a href="#">子功能表二</a></li>      <li><a href="#">子功能表三</a></li>    </ul>  </li>  <li><a href="#">菜單三</a></li>  <li><a href="#">菜單四</a>    <ul>      <li><a href="#">子功能表一</a></li>      <li><a href="#">子功能表二</a></li>      <li><a href="#">子功能表三</a></li>    </ul>  </li>  <li><a href="#">菜單五</a></li></ul>
相關文章

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.