纯html+css实现下拉菜单

下拉菜单核心代码,未设置样式

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test dropdown</title>
  <style>
  /*隐藏二级菜单*/
    #drop-down>ul {
      display: none;
    }
    /*显示二级菜单*/
    #drop-down:hover ul {
      display: block;
    }
  </style>
</head>
<body>
  <div id="drop-down">
    <p>一级菜单</p>
      <ul>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
  </div>
</body>
</html>

这里写图片描述

美化

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
  <meta charset="utf-8">
  <title>test dropdown</title>
  <style>
    body, div, p, ul ,li {
      padding: 0;
      margin: 0;
    }
    body {
      font-family: 微软雅黑;
      line-height: 1.8rem;
    }
    #drop-down {
      width: 100px;
    }
    #drop-down>p {
      width: 100%;
      background-color: black;
      color: white;
      text-align: center;
    }
    #drop-down>ul {
      display: none;
      background-color: lightblue;
      color: white;
      list-style-type: none;
      text-align: center;
      box-shadow: 5px 5px 5px #6e6e6e;
    }
    #drop-down:hover ul {
      display: block;
    }
  </style>
</head>
<body>
  <div id="drop-down">
    <p>一级菜单</p>
      <ul>
        <li>二级菜单</li>
        <li>二级菜单</li>
      </ul>
  </div>
</body>
</html>

这里写图片描述

  • 7
    点赞
  • 67
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例: HTML 代码: ```html <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li class="dropdown"> <a href="#">产品</a> <ul class="dropdown-menu"> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></li> </ul> </li> <li><a href="#">关于我们</a></li> </ul> </nav> ``` CSS 代码: ```css nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; position: relative; } nav li a { display: block; padding: 10px; text-decoration: none; color: #333; } .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 1; background-color: #fff; border: 1px solid #ccc; } .dropdown:hover .dropdown-menu { display: block; } .dropdown-menu li { display: block; } .dropdown-menu li a { display: block; padding: 10px; text-decoration: none; color: #333; } .dropdown-menu li:hover { background-color: #f5f5f5; } ``` 解释: - `nav ul` 和 `nav li` 用来设置导航条的样式。 - `nav li a` 用来设置导航链接的样式。 - `dropdown` 类用来标记下拉菜单的父元素。 - `dropdown-menu` 类用来设置下拉菜单的样式,设置为绝对定位,隐藏起来。 - `dropdown:hover .dropdown-menu` 用来设置鼠标悬停在下拉菜单的父元素时,显示下拉菜单。 - `dropdown-menu li` 和 `dropdown-menu li a` 用来设置下拉菜单中的链接的样式。 - `dropdown-menu li:hover` 用来设置鼠标悬停在下拉菜单中的链接时的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值