zoukankan      html  css  js  c++  java
  • 二级导航栏的立体显示

    css结构:

     *{
                margin:0;
                padding:0;
            }
            a{
                text-decoration: none;
            }
            li{
                list-style:none;
            }
            .nav1{
                600px;
                height: 50px;
                background: orange;
                margin: 100px auto;
                border-bottom: 5px solid purple;
            }
            li{
                float: left;
                position: relative;
            }
            a{
                display: block;
                 100px;
                height: 45px;
                line-height: 45px;
                text-align: center;
                background: skyblue;
                border-right: 2px solid black;
                border-left:2px solid red;
                padding: 0 8px;
                margin-top:5px;
            }
            a:hover{
                margin:0;
                background: black;
                color:brown;
            }
            .nav2{
                position: absolute;
                top:50px;
            }
            .nav2 li a{
                border:none;
                border-bottom: 5px solid purple;
            }
            .nav2{
                display: none;
            }
            .nav1 li:hover .nav2{
                display: block;
            }
        </style>
    

      注意点:   :hove必须设置在li上,因为:hover只能作用于元素自身和其子元素,很容易出错。

    htm结构:

     <ul class="nav1">
            <li><a href="">公司新闻</a>
                <ul class="nav2">
                    <li><a href="">公司新闻1</a></li>
                    <li><a href="">公司新闻2</a></li>
                    <li><a href="">公司新闻3</a></li>
                    <li><a href="">公司新闻4</a></li>
                    <li><a href="">公司新闻5</a></li>
                </ul>
            </li>
            <li><a href="">国内新闻</a>
                <ul class="nav2">
                    <li><a href="">国内新闻1</a></li>
                    <li><a href="">国内新闻2</a></li>
                    <li><a href="">国内新闻3</a></li>
                    <li><a href="">国内新闻4</a></li>
                    <li><a href="">国内新闻5</a></li>
                </ul>
            </li>
            <li><a href="">国际新闻</a>
                <ul class="nav2">
                    <li><a href="">国际新闻1</a></li>
                    <li><a href="">国际新闻2</a></li>
                    <li><a href="">国际新闻3</a></li>
                    <li><a href="">国际新闻4</a></li>
                    <li><a href="">国际新闻5</a></li>
                </ul>
            </li>
            <li><a href="">季度销售</a>
                <ul class="nav2">
                    <li><a href="">季度销售1</a></li>
                    <li><a href="">季度销售2</a></li>
                    <li><a href="">季度销售3</a></li>
                    <li><a href="">季度销售4</a></li>
                    <li><a href="">季度销售5</a></li>
                </ul>
            </li>
            <li><a href="">薪资对比</a>
                <ul class="nav2">
                    <li><a href="">薪资对比1</a></li>
                    <li><a href="">薪资对比2</a></li>
                    <li><a href="">薪资对比3</a></li>
                    <li><a href="">薪资对比4</a></li>
                    <li><a href="">薪资对比5</a></li>
                </ul>
            </li>
        </ul>
    

     

  • 相关阅读:
    Boost Log : Trivial logging
    Boost Log : Definitions
    Boost Log : Setting up sinks
    Boost Log
    VS工程文件记录
    vs2017激活密钥
    JWT库
    Mac 使用 NFS 连接 Centos 上的共享文件夹
    Mahout源码目录说明
    linux中的线程同步:生产者、消费者问题
  • 原文地址:https://www.cnblogs.com/94-Lucky/p/13179502.html
Copyright © 2011-2022 走看看