纯CSS实现二级导航菜单(具有伸缩过渡效果)

本文将要介绍的是一款具有伸缩过渡效果的二级导航菜单，该菜单使用纯CSS实现，代码较少，修改容易，如果你喜欢此菜单的效果，那么可以直接下载本实例修改使用，方便快捷。

demodownload

HTML

<div class="nav">
    <ul class="first">
        <li>一级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>二级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>三级菜单
            <ul class="second">
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
    </ul>
</div>
<div class="content"></div>

HTML使用一个DIV标签作为菜单盒子模型，其class值是nav。

菜单列表（一级和二级）均使用ul li标签，一级菜单ul的class值是first，二级菜单ul的class值是second。

CSS

.nav {
    width: 600px;
    height: 50px;
    margin: 100px auto;
    background-color: yellow;
}

.content {
    width: 600px;
    height: 250px;
    margin: -100px auto;
    background-color: red;
}

.nav .first>li {
    width: 200px;
    height: 50px;
    list-style: none;
    line-height: 50px;
    float: left;
    text-align: center;
}

.second li {
    list-style: none;
    background-color: pink;
    transform: rotateY(-90deg);
    transition-duration: 1s;
    opacity: 0;
    position: relative;
}

.first>li:hover .second li {
    transform: none;
    opacity: 1;
}

.second li:nth-child(1) {
    transition-delay: 0ms;
}

.second li:nth-child(2) {
    transition-delay: 100ms;
}

.second li:nth-child(3) {
    transition-delay: 200ms;
}

.second li:nth-child(4) {
    transition-delay: 300ms;
}

.second li:nth-child(5) {
    transition-delay: 400ms;
}

CSS代码不多，并且也不难理解，.nav{}定义菜单的高、宽、背景颜色等属性。

.nav .first>li{}定义一级菜单的高、宽、列表样式、行高等属性。

.second li{}定义二级菜单的列表样式、背景颜色等属性，这里定义了transform: rotateY(-90deg);的过渡动画属性，沿Y轴转动90度，transition-duration: 1s;是定义动画时间为1s。

nth-child(n) n的值是1-5，代表是5个二级菜单项。如果你有多于5个二级菜单项，则参考实例代码增加相应的nth-child(n)属性，需要注意的是transition-delay是以100ms递增的。

总结

本文介绍了纯CSS实现二级导航菜单(具有伸缩过渡效果)，代码精炼易理解易修改，如果喜欢该菜单，可以直接下载实例代码修改使用。

您可能对以下文章也感兴趣

• CSS实现Menu Toggle移动菜单切换按钮(打开/关闭)
• 漂亮的左侧二级导航菜单(伸缩式)【演示/源码下载】
• CSS+JS：一款常见的简单大方又实用的移动网页(二级)菜单设计
• 3款有下横线平滑过渡效果的导航栏菜单
• 非常漂亮的响应式导航栏设计
• 简单实用的响应式导航菜单设计

• CSS3实现的可缩进的侧栏导航菜单
• 漂亮的纯CSS3水平导航菜单（有过渡动画效果）
• 可以展开和闭合子菜单的CSS3垂直导航菜单
• 又一个随内容滚动而变化的侧边/左侧目录导航
• 侧边/左侧目录导航随内容滚动而变化
• 纯CSS：非常漂亮的左侧导航/内容目录导航
• 简单却实用的CSS水平和垂直导航栏【演示/源码】
• CSS3+JQuery实现的三级下拉导航菜单