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

admin · 发表于 2022-1-21 20:24:07

话不多说，直接上代码
这是HTML部分:
[mw_shl_code=applescript,true]<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>[/mw_shl_code]
css样式设计：

[mw_shl_code=applescript,true]<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>[/mw_shl_code]
[mw_shl_code=applescript,true]<!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>[/mw_shl_code]

		自动登录	找回密码
密码			立即注册

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

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