Question

我创建了一个似乎正常工作的简单导航。有一件事真的让我烦恼。在最后一个下拉项目我想在边界之后有一些空间，但是不能弄清楚如何得到它。我已经尝试在下拉列表上放置一些底部填充但它似乎不起作用。

非常感谢任何有关我出错的建议。

https://jsfiddle.net/rufusbear/hv8gwwg9/

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Fennes Clay</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
  <link rel="stylesheet" href="css/jquery.bxslider.css">
  <script src="https://use.fontawesome.com/9c815a24d9.js"></script>

  <style>
    .nav-wrap {
      max-width: 700px;
      margin: 0 auto;
      background-color: #718373;
      height: 80px;
      text-transform: uppercase;
    }

    .dropdown {
      display: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0;
    }

    .dropdown li a {
      width: 110px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      padding: 5px 10px;
    }

    .nav-list {
      margin: 0;
      padding: 0;
    }

    .nav-list li {
      position: relative;
      list-style: none;
      float: left;
      width: 150px;
      line-height: 80px;
      text-align: center;
      background-color: #718373;
    }

    .nav-list li a {
      text-decoration: none;
      color: white;
      display: block;
    }

    .nav-list li:hover>.dropdown {
      display: block;
    }

    .dropdown li a:hover {
      border: 2px solid white;
    }
  </style>
</head>
<body>
  <nav>
    <div class="nav-wrap">
      <ul class="nav-list">
        <li><a href="#">about</a>
          <ul class="dropdown">
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
          </ul>
        </li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </div>
  </nav>
</body>
</html>

Answer 1

这是你之后的事吗？

.dropdown li:last-child a {
  margin-bottom: 10px;
}

Answer 2

您可以添加

background-color: #718373;
padding-bottom: 20px;

到.dropdown元素。

防止链接在悬停时变形

.dropdown li a:hover {
  border: 2px solid white;
}

与

.dropdown li a:hover {
  outline: 2px solid white;
  outline-offset: -2px;
}

＆＃13;

    .nav-wrap {
      max-width: 700px;
      margin: 0 auto;
      background-color: #718373;
      height: 80px;
      text-transform: uppercase;
    }
    
    .dropdown {
      display: none;
      padding: 0;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0;
      
      background-color: #718373;
      padding-bottom: 20px;
    }
    
    .dropdown li a {
      width: 110px;
      height: 40px;
      line-height: 40px;
      margin: 0 auto;
      padding: 5px 10px;
    }
    
    .nav-list {
      margin: 0;
      padding: 0;
    }
    
    .nav-list li {
      position: relative;
      list-style: none;
      float: left;
      width: 150px;
      line-height: 80px;
      text-align: center;
      background-color: #718373;
    }
    
    .nav-list li a {
      text-decoration: none;
      color: white;
      display: block;
    }
    
    .nav-list li:hover>.dropdown {
      display: block;
    }
    
    .dropdown li a:hover {
      outline: 2px solid white;
      outline-offset: -2px;
    }

＆＃13;

 <nav>
    <div class="nav-wrap">
      <ul class="nav-list">
        <li><a href="#">about</a>
          <ul class="dropdown">
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
            <li><a href="#">hello</a></li>
          </ul>
        </li>
        <li><a href="#">about</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </div>
  </nav>

＆＃13;

Answer 3

添加此规则：

.nav-list li ul li:last-child {
  padding-bottom: 15px;
}

它仅将填充底部添加到li内每个嵌套ul的最后.nav-list（根据需要调整px数量）

这是一个小提琴：https://jsfiddle.net/8w67f9y7/2/

Answer 4

检查这个

https://jsfiddle.net/rufusbear/hv8gwwg9/

  margin-top: 30px;

如何在css中添加空格后的空格

4 个答案: