zoukankan      html  css  js  c++  java
  • 简单的纯css菜单

    <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>


    作者:Lance
    出处:http://www.cnblogs.com/nuaalfm/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    android数据恢复
    UVA 690 Pipeline Scheduling
    2017 国庆湖南 Day4
    2017 国庆湖南 Day5
    2017 国庆湖南 Day6
    2017国庆 清北学堂 北京综合强化班 Day1
    2017 国庆湖南Day2
    bzoj 2962 序列操作
    UVA 818 Cutting Chains
    UVA 211 The Domino Effect
  • 原文地址:https://www.cnblogs.com/nuaalfm/p/2705333.html
Copyright © 2011-2022 走看看