Question

我使用的是我在此网站上找到的菜单示例。这是jsfiddle。该示例显示页面的背景颜色和菜单栏的另一种颜色。在我的网站上，颜色将是相同的。但是当颜色相同时，总和菜单项显示在主菜单项下方太远。有人请解释我如何删除该空间，以便子项目，如Splash Tasks，就在主要项目的正下方，如Splash Mode？

以下是使用的代码：

    <style>
    @font-face {
      font-family: "Yeezy";
      src: url("../static/yeezy.ttf");
    }

    * {
      font-family: "Yeezy";
      font-weight: bold;
      color: #dbdbdb !important;
    }

    html,
    body {
      height: 900px;
      background-size: cover;
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%), url("https://i.imgur.com/pxYxnOn.jpg");
    }
    .navbar {
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.2);
    }

    /* Links inside the navbar */
    .navbar a {
      float: left;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.4);
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }


    /* The dropdown container */

    .dropdown {
      float: left;
      overflow: hidden;
    }

    /* Dropdown button */
    .dropdown .dropbtn {
      font-size: 16px;
      border: none;
      outline: none;
      color: rgba(0, 0, 0, 0.2);
      padding: 17px 13px;
      background-color: inherit;
      font-family: inherit;
      /* Important for vertical align on mobile phones */
      margin: 0;
      /* Important for vertical align on mobile phones */
    }
    /* Add a red background color to navbar links on hover */
    .navbar a:hover,
    .dropdown:hover .dropbtn { 
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      box-shadow: 0px 0px 16px -20px rgba(0, 0, 0, 0.1);
      z-index: 1;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: rgba(0, 0, 0, 0.2);   
    }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
    }
    </style>

    <body>
      <div class="navbar navbar-default">
        <a href="#home">Home</a>
        <div class="dropdown">
          <button class="dropbtn">Splash Mode</button>
          <div class="dropdown-content">
            <a href="splashtasks">Splash Tasks</a>
            <a href="h2splash">How to use Product Mode</a>
          </div>
        </div>
        <div class="dropdown">
          <button class="dropbtn">Product Mode</button>
          <div class="dropdown-content">
            <a href="producttasks">Product Tasks</a>
            <a href="h2product">How to use Product Mode</a>
          </div>
        </div>
      </div>
    </body>

Answer 1

.dropdown-content a:first-child {
    padding-top: 0;
}

这将删除下拉菜单中第一个元素的填充顶部

在css中，你可以在这里给下拉元素留出空间：

.dropdown-content a {
    ...
    padding: 12px 16px;
    ...

如何删除菜单中的间距

1 个答案: