zoukankan      html  css  js  c++  java
  • 导航下拉栏 简单方法

    html部分

    <ul class="nav">
           <li>首页</li>
           <li>产品</li>
           <li>服务
               <ul>
                   <li>设计</li>
                   <li>研发</li>
                   <li>交付</li>
               </ul>
           </li>
           <li>关于我们
               <ul>
                   <li>博客园</li>
                   <li>FlyElephant</li>
                   <li>keso</li>
               </ul>
           </li>
       </ul><ul class="nav">
           <li>首页</li>
           <li>产品</li>
           <li>服务
               <ul>
                   <li>设计</li>
                   <li>研发</li>
                   <li>交付</li>
               </ul>
           </li>
           <li>关于我们
               <ul>
                   <li>博客园</li>
                   <li>FlyElephant</li>
                   <li>keso</li>
               </ul>
           </li>
       </ul>    

    css部分

    ul,li{
                list-style: none;
            }
                .nav {
        margin-left: 200px;
        margin-top:200px;
    }
     
    .nav li {
        float: left;
        width: 150px;
        background-color: #00C5CD;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border-right: 1px solid #fff;
    }
     
    .nav li:last-child {
        border-right: none;
    }
     
    .nav li ul {
        width: 150px;
        position: absolute;
        margin-top: 10px;
        left: 9999px;
    }
     
    .nav li ul li {
        background-color: #00EE00;
        border-bottom: 1px solid #fff;
    }
     
    .nav li:hover ul {
        left: auto;
    }

    完整代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            ul,li{
                list-style: none;
            }
                .nav {
        margin-left: 200px;
        margin-top:200px;
    }
     
    .nav li {
        float: left;
        150px;
        background-color: #00C5CD;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        border-right: 1px solid #fff;
    }
     
    .nav li:last-child {
        border-right: none;
    }
     
    .nav li ul {
        150px;
        position: absolute;
        margin-top: 10px;
        left: 9999px;
    }
     
    .nav li ul li {
        background-color: #00EE00;
        border-bottom: 1px solid #fff;
    }
     
    .nav li:hover ul {
        left: auto;
    }
            </style>
        </head>
        <body>
            <ul class="nav">
           <li>首页</li>
           <li>产品</li>
           <li>服务
               <ul>
                   <li>设计</li>
                   <li>研发</li>
                   <li>交付</li>
               </ul>
           </li>
           <li>关于我们
               <ul>
                   <li>博客园</li>
                   <li>FlyElephant</li>
                   <li>keso</li>
               </ul>
           </li>
       </ul><ul class="nav">
           <li>首页</li>
           <li>产品</li>
           <li>服务
               <ul>
                   <li>设计</li>
                   <li>研发</li>
                   <li>交付</li>
               </ul>
           </li>
           <li>关于我们
               <ul>
                   <li>博客园</li>
                   <li>FlyElephant</li>
                   <li>keso</li>
               </ul>
           </li>
       </ul>    
        </body>
    </html>

  • 相关阅读:
    网络七层
    微信小程序开发工具 常用快捷键
    BZOJ 1026 windy数 (数位DP)
    BZOJ 1026 windy数 (数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    CodeForces 55D Beautiful numbers (SPOJ JZPEXT 数位DP)
    HDU 3709 Balanced Number (数位DP)
    HDU 3709 Balanced Number (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
    UVA 11361 Investigating Div-Sum Property (数位DP)
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6266136.html
Copyright © 2011-2022 走看看