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>
    

     

  • 相关阅读:
    源码学习-出差有感
    《java数据结构与算法》系列之“快速排序"
    新征途
    命运总是喜欢开玩笑
    《java数据结构与算法》系列之“简单排序"-冒泡,选择,插入
    秒杀9种排序算法(JavaScript版)
    《进击的巨人》
    Noip2001 提高组 T3
    Noip2011 提高组 Day1 T1 铺地毯 + Day2 T1 计算系数
    Noip2012 提高组 Day1 T1 Vigenère 密码
  • 原文地址:https://www.cnblogs.com/94-Lucky/p/13179502.html
Copyright © 2011-2022 走看看