react-sty
/
dropdown.html

<!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>
    <link rel="stylesheet" href="./fa/css/all.css">
    <link rel="stylesheet" href="./reset.css">
    <style>
      body {
        background-color: skyblue;
      }

      header {
        background-color: #eee;
        height: 30px;
        color: #999;
        font-size: 12px;
      }

      header a:hover {
        color: red;
      }

      .menu {
        width: 500px;
        margin: 0 auto;
      }

      .home-jd {
        position: relative;
        display: inline-block;
        padding: 0 5px;
      }

      .subject {
        line-height: 30px;
      }

      .home-jd .dropdown {
        /* display: none; */
        width: 280px;
      }

      .home-jd:hover {
        background-color: #fff;
      }

      .home-jd:hover .dropdown {
        display: block;
        position: absolute;
        left: 0;
      }

      .dropdown {
        display: none;
        border: 1px solid #eee;
        border-top: none;
        background-color: #fff;
      }

      .drops {
        display: block;
        width: 280px;
        /* border: 1px solid red; */
      }

      .drops:not(:last-child) {
        border-bottom: 1px solid #efefef;
      }

      .items {
        display: inline-block;
        vertical-align: top;  /* 字体顶部对齐 */
        width: 130px;
      }

      .items li {
        margin: 5px 10px;
      }
    </style>
<body>
  <header>
    <div class="menu">
      <div class="home-jd">
        <div class="subject">
          <a href="#">我的京东</a>
          <i class="fas fa-angle-down"></i>
        </div>
        <div class="dropdown">
          <div class="drops">
            <ol class="items">
              <li><a href="#">待处理订单</a></li>
              <li><a href="#">返修退换货</a></li>
              <li><a href="#">降价商品</a></li>
            </ol>
            <ol class="items">
              <li><a href="#">我的问答</a></li>
              <li><a href="#">我的关注</a></li>
            </ol>
          </div>
          <div class="drops">
            <ol class="items">
              <li><a href="#">我的京豆</a></li>
              <li><a href="#">我的白条</a></li>
            </ol>
            <ol class="items">
              <li><a href="#">我的优惠券</a></li>
              <li><a href="#">我的理财</a></li>
            </ol>
          </div>
        </div>
      </div>

      <div class="home-jd">
        <div class="subject">
          <a href="#">企业采购</a>
          <i class="fas fa-angle-down"></i>
        </div>
        <div class="dropdown">
          <div class="drops">
            <ol class="items">
              <li><a href="#">企业购</a></li>
              <li><a href="#">工业品</a></li>
              <li><a href="#">礼品卡</a></li>
              <li><a href="#">工品优选</a></li>
              <li><a href="#">大中型企业采购</a></li>
            </ol>
            <ol class="items">
              <li><a href="#">商用场景馆</a></li>
              <li><a href="#">丰客多商城</a></li>
              <li><a href="#">微信企业购</a></li>
              <li><a href="#">京东锦鲤</a></li>
            </ol>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>
</html>