利用html5和css3写二级导航

首先写出导航的大致结构，并写出一级菜单

<div class="box">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">产品中心</a>
                
            </li>

            <li>
                <a href="#">联系我们</a>
            </li>
            <li>
                <a href="#">服务热线</a>
            </li>
        </ul>
    </div>

利用css对一级导航的样式进行修改

*{
    /* 清除默认边距 */
    margin: 0;
    padding: 0;
}

.box{
    /* 导航的大小和位置 */
    width: 500px;
    height: 80px;
    margin: 0 auto;
}

.box li{
    /* 列表项的样式 */
    list-style: none;
    float: left;
    width: 100px;
    height: 50px;
}

.box li a{
    /* 超链接的样式 */
    display: block;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    color: #000;
    background-color: #ddd;
}

.box li a:hover{
    /* 划过导航时发生变化 */
    background-color: #555;
}

目前的效果如下：

再给每一个列表项li中新增一个无序表ul

<div class="box">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">产品中心</a>
                <ul class="nav2">
                    <li><a href="#">产品1</a></li>
                    <li><a href="#">产品2</a></li>
                    <li><a href="#">产品2</a></li>
                </ul>
            </li>

            <li>
                <a href="#">联系我们</a>
                <ul class="nav2">
                    <li><a href="#">qq</a></li>
                    <li><a href="#">weichat</a></li>
                </ul>
            </li>
            <li>
                <a href="#">服务热线</a>
            </li>
        </ul>
    </div>

把二级导航的定位设置为绝对定位使其脱离文档流，并隐藏该块状元素

.nav2{
    /* 默认二级菜单隐藏 */
    position: absolute;
    display: none;
}

在利用css时二级导航竖直排列

.nav2 li{
    /* 使二级导航竖直排列 */
    float: none;
}

最后给列表项li增加划过时显示二级导航的属性

.box li:hover .nav2{
    /* 划过时 */
    display: block;
}

最终效果为：

利用html5和css3写二级导航

猜你喜欢