css实现导航菜单下拉效果「建议收藏」

全栈程序员站长

发布于 2022-09-19 19:18:03

3.1K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

通过css也可以实现简单的导航栏效果，一些不会写js的下伙伴不用担心了。

先上HTML部分

     <nav>
        <ul class="level">
            <li><a href="">首页</a></li>
            <li>
                <a href="">栏目1</a>
                <ul class="two">
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
            <li>
                <a href="">栏目2</a>
                <ul class="two">
                    <li>二级菜单4</li>
                    <li>二级菜单5</li>
                    <li>二级菜单6</li>
                </ul>
            </li>
            <li>
                <a href="">栏目3</a>
                <ul class="two">
                    <li>二级菜单7</li>
                    <li>二级菜单8</li>
                    <li>二级菜单9</li>
                </ul>
            </li>
            <li>
                <a href="">栏目4</a>
                <ul class="two">
                    <li>二级菜单10</li>
                    <li>二级菜单11</li>
                    <li>二级菜单12</li>
                </ul>
            </li>
            <li>
                <a href="">栏目5</a>
                <ul class="two">
                    <li>二级菜单13</li>
                    <li>二级菜单14</li>
                    <li>二级菜单15</li>
                </ul>
            </li>
        </ul>
    </nav>

效果如下图，现在什么样式也没有，我们需要对HTML进行一些样式上的调整让其看起来好看一下。

现附上css：

<style>
    *{padding: 0;margin: 0;}  /* 先重置一下html，消除HTML标签默认的内外边距 */
    .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
    .clear{clear: both;}  /* 清除浮动 */
    a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
    ul,li{list-style: none;}
    nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;}
    nav .level>li a{color: black;}
    nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */

    nav .two{display: none;}  /* 先使二级菜单的内容隐藏 */
    nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
</style>

如下图，现在导航栏已经有了一些大概的效果了，但是目前来看还是有一些不好看，我们还需要美观一下

现在我们要写一下颜色变换和二级导航的样式，话不多说，直接附上代码

 nav .level>li{transition: .4s;}  /* 颜色添加过渡时间     未处理兼容性*/
 nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
 nav .two li:hover{background: pink;}

效果如下图，现在我们已经实现了纯css实现导航栏下拉效果

是不是很简单，有什么不懂的欢迎留言！

最后附上全部的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css实现简单的导航栏下拉</title>
</head>
<style>
    *{padding: 0;margin: 0;}  /* 先重置一下html，消除HTML标签默认的内外边距 */
    .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
    .clear{clear: both;}  /* 清除浮动 */
    a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
    ul,li{list-style: none;}
    nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
    nav .level>li a{color: black;}
    nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */

    nav .two{display: none;margin-top: 10px;}  /* 先使二级菜单的内容隐藏 */
    nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
    nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
    nav .two li:hover{background: pink;}
</style>
<body>
    <nav>
        <div class="wrap">
            <ul class="level">
                <li><a href="">首页</a></li>
                <li>
                    <a href="">栏目1</a>
                    <ul class="two">
                        <li>二级菜单1</li>
                        <li>二级菜单2</li>
                        <li>二级菜单3</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目2</a>
                    <ul class="two">
                        <li>二级菜单4</li>
                        <li>二级菜单5</li>
                        <li>二级菜单6</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目3</a>
                    <ul class="two">
                        <li>二级菜单7</li>
                        <li>二级菜单8</li>
                        <li>二级菜单9</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目4</a>
                    <ul class="two">
                        <li>二级菜单10</li>
                        <li>二级菜单11</li>
                        <li>二级菜单12</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目5</a>
                    <ul class="two">
                        <li>二级菜单13</li>
                        <li>二级菜单14</li>
                        <li>二级菜单15</li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/159446.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css