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>

  • 相关阅读:
    常用的 HTML 头部标签
    placeholder的兼容处理方法
    用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式
    终于有人把P2P、P2C、O2O、B2C、B2B、C2C的区别讲透了!还有许多其它类别的类型分享
    JS判断android ios系统 PC端和移动端
    一路的前端编辑器
    图片压缩的在线好工具
    关于文本换行的问题
    字符、字节的概念及其区别
    application/x-www-form-urlencoded接口响应报文中文乱码
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6266136.html
Copyright © 2011-2022 走看看