css3实现二级导航

在上篇 css3 手风琴效果中得到灵感，通过简单css实现二级导航效果

首先页面结构还是通过无需列表嵌套来实现

<nav>
            <ul class='clearfix'>
                <li class="menu">item1
                    <ul class='subMenu'>
                        <li>subItem1</li>
                        <li>subItem2</li>
                        <li>subItem3</li>
                    </ul>
                </li>
                <li class="menu">item2
                    <ul class='subMenu'>
                        <li>subItem1</li>
                        <li>subItem2</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                    </ul>
                </li>
                <li class="menu">item3
                    <ul class='subMenu'>
                        <li>subItem1</li>
                        <li>subItem2</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                        <li>subItem3</li>
                    </ul>
                </li>
            </ul>
        </nav>

添加样式实现导航效果

.clearfix:after{content:'';clear:both; overflow:auto;}
    /* nav */
    nav{
        border:1px solid #eee;
        width:300px;
        height: 40px;        
        margin:0 auto;
        text-align:center;
    }
    nav ul{
        list-style:none;
        margin:0;
        padding: 0;    
    }
    nav ul>li{
        display:block;
        float:left;
        width:100px;
        height:40px;
        line-height:40px;
        background: #f80;
        overflow:hidden;
        
    }
    li.menu:hover{
        background: #f00;
        height:auto;
        
    }

最终效果图

PS:

li.menu:hover中为了使二级导航可以全部显示，没法将height设成固定值来应用动画过度效果，而是直接把height:设成auto，但没能成功应用动画效果是一种遗憾，希望能得到高人指点

转载于:https://www.cnblogs.com/V-JACK/p/4799410.html