zoukankan      html  css  js  c++  java
  • css实现二级导航(二)

    今天在浏览网站的时候发现,二级导航除了过去清一色的ul外,还出现了一个 大块div来让二级导航撑下更多的信息,特此记录一下

    首先搭建结构

    <nav>
            <ul>
                <li class="menu">test
                    <div class="drop">
                        <ul>
                            <li>测试1</li>
                            <li>测试2</li>
                            <li>测试3</li>
                            <li>测试4</li>
                        </ul>
                    </div>
                </li>
                <li class="menu">test
                    <div class="drop">
                        <ul>
                            <li>测试1</li>
                            <li>测试2</li>
                            <li>测试3</li>
                            <li>测试4</li>
                        </ul>
                    </div>
                </li>
                <li class="menu">test
                    <div class="drop pro"></div>
                </li>
                <li class="menu">test
                    <div class="drop">
                        <ul>
                            <li>测试1</li>
                            <li>测试2</li>
                            <li>测试3</li>
                            <li>测试4</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>

    结构非常简单,如下图

    image

    然后添加样式实现效果

    nav{
            position:relative;
            height:40px;
            500px;
            margin: 0 auto;
            padding:0;
            text-align:center;
    
        }
        ul{
    
            margin:0;
            padding: 0;        
            list-style:none;
        }
        nav li.menu{
            
            display:inline-block;
            float:left;
            100px;
            height:40px;
            line-height:40px;
            background: rgba(5, 112, 144, 0.55);;
            border-right:1px solid #fff;
            box-sizing: border-box;
        }
        .drop{
            position:absolute;
            top:40px;            
            padding: 10px;
            display: block;
            /*border:1px solid #eee;*/
            background: rgba(94, 251, 89, 0.75);
            display: none;
        }
        li.menu:hover{
            background:rgba(94, 251, 89, 0.75);
        }
        li.menu:hover .drop{
            display:block;
        }
        .pro{
            height:500px;
            300px;
            background: #fea;
        }
        .drop ul li{
            font-size:16px;
            height:30px;
            line-height:30px;
            80px;
        }

    效果图

    image

    多内容模式

    image

    欢迎留言交流,更多有趣的css玩法眨眼

  • 相关阅读:
    原生js操作Dom命令总结
    JSON语法、对象、遍历数组的区别和基本操作
    JavaScript数组方法
    JavaScript基本语法
    JavaScript
    CSS外边框、边界样式常用组合
    HTML特殊符号(字符实体)大全
    CSS设置边框、符号、背景样式、链接属性
    CSS样式链接和文字常用属性
    k8s kubernetes给node节点添加标签和删除node节点标签
  • 原文地址:https://www.cnblogs.com/V-JACK/p/4802206.html
Copyright © 2011-2022 走看看