二级导航栏的立体显示

css结构:

 *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style:none;
        }
        .nav1{
            width:600px;
            height: 50px;
            background: orange;
            margin: 100px auto;
            border-bottom: 5px solid purple;
        }
        li{
            float: left;
            position: relative;
        }
        a{
            display: block;
            width: 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>