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>

结构非常简单，如下图

 

然后添加样式实现效果

nav{
        position:relative;
        height:40px;
        width: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;
        width: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;
        width:300px;
        background: #fea;
    }
    .drop ul li{
        font-size:16px;
        height:30px;
        line-height:30px;
        width:80px;
    }

效果图

多内容模式

欢迎留言交流，更多有趣的css玩法