纯HTML CSS制作导航栏下拉菜单

全栈程序员站长

发布于 2022-09-01 11:46:36

6.2K0

发布于 2022-09-01 11:46:36

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

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

大一web网页设计，尝试更多炫酷页面内容，狠狠加分！！！！

话不多说，直接上代码

这是HTML部分:

<body>
    <div>
        <ul class="nav">
            <li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>               
                </ul>
            </li>
            <li>首页
                <ul>
                    <li></li>  
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

css样式设计：

<style>
        *{
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }
        body{
            /* 设置页面背景颜色 */
            background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
            /* 弹性布局 */
            display: flex;
            /* 居中 */
            align-items: center;
            justify-content: center;
        }
        .nav{
            /* 整体框架大小位置 */
            width: 100%;
            height: 100%;
            position: relative;
            top: 300px;
        }
        .nav li{
            /* 导航栏大小 */
            width: 180px;
            height: 60px;
            /* 去浮动，使li横向布局 */
            float: left;
            /* 每个li之间间隙 */
            margin-right: 10px;
            /* 去点 */
            list-style: none;
            /* 背景颜色 */
            background-color: gray;
            /* 行高，使文本居中 */
            line-height: 60px;
            text-align: center;
            /* 阴影，使导航栏有层次感 */
            box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
        }
        .nav li ul li{
            /* 去点 */
            list-style: none;
            /* 下拉菜单大小 */
            width: 170px;
            height: 60px;
            /* 去浮动，使li横向布局 */
            float: left;
            /* 背景颜色 */
            background-color: chocolate;
            /* 阴影，使导航栏有层次感 */
            border: 5px rgba(0, 0, 0, 0.1) solid;
            /* margin-top: 5px; 此代码可使下拉菜单有间隔，更美观，但无法实现hover效果*/
        }
        .nav li:hover{
            /* 鼠标 */
            cursor: pointer;
            /* 背景颜色 */
            background-color: #50536e;
            /* 阴影，使导航栏有层次感 */
            box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
            /* 执行时间 */
            transition: .3s;
        }
            /* 隐藏 */
        .nav li ul li{
            display: none;
        }
            /* 显示 */
        .nav li:hover ul li{
            display: block;
            transition: 0.3s;
            cursor: pointer;
        }
        .nav li ul li:hover{
            cursor: pointer;
            background-color: sandybrown;
        }
    </style>

完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧脑瓜--下拉菜单</title>
    <style>
        *{
            /* 去除页面边距 */
            padding: 0;
            margin: 0;
        }
        body{
            /* 设置页面背景颜色 */
            background: linear-gradient(to right, #f6d365 0%, #fda085 100%);
            /* 弹性布局 */
            display: flex;
            /* 居中 */
            align-items: center;
            justify-content: center;
        }
        .nav{
            /* 整体框架大小位置 */
            width: 100%;
            height: 100%;
            position: relative;
            top: 300px;
        }
        .nav li{
            /* 导航栏大小 */
            width: 180px;
            height: 60px;
            /* 去浮动，使li横向布局 */
            float: left;
            /* 每个li之间间隙 */
            margin-right: 10px;
            /* 去点 */
            list-style: none;
            /* 背景颜色 */
            background-color: gray;
            /* 行高，使文本居中 */
            line-height: 60px;
            text-align: center;
            /* 阴影，使导航栏有层次感 */
            box-shadow: -5px 5px 0 rgba(0, 0, 0, 0.3);
        }
        .nav li ul li{
            /* 去点 */
            list-style: none;
            /* 下拉菜单大小 */
            width: 170px;
            height: 60px;
            /* 去浮动，使li横向布局 */
            float: left;
            /* 背景颜色 */
            background-color: chocolate;
            /* 阴影，使导航栏有层次感 */
            border: 5px rgba(0, 0, 0, 0.1) solid;
            /* margin-top: 5px; 此代码可使下拉菜单有间隔，更美观，但无法实现hover效果*/
        }
        .nav li:hover{
            /* 鼠标 */
            cursor: pointer;
            /* 背景颜色 */
            background-color: #50536e;
            /* 阴影，使导航栏有层次感 */
            box-shadow: -10px 10px 0 rgba(0, 0, 0, 0.6);
            /* 执行时间 */
            transition: .3s;
        }
            /* 隐藏 */
        .nav li ul li{
            display: none;
        }
            /* 显示 */
        .nav li:hover ul li{
            display: block;
            transition: 0.3s;
            cursor: pointer;
        }
        .nav li ul li:hover{
            cursor: pointer;
            background-color: sandybrown;
        }
    </style>
</head>
<body>
    <div>
        <ul class="nav">
            <li style="border-radius: 20px 0px 0px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>               
                </ul>
            </li>
            <li>首页
                <ul>
                    <li></li>  
                </ul>
            </li>
            <li>智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </li>
            <li style="border-radius: 0px 0px 20px 0px;">智慧脑瓜
                <ul>
                    <li></li>
                    <li></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

新人制作不易，求赞求收藏

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

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

原始发表：2022年5月2，如有侵权请联系 cloudcommunity@tencent.com 删除

https