html - 我怎样才能改变之间的空间和元素？

Question

我对可能最简单的css问题发疯了。我只想在 a<ul>和<li>元素之间添加一些边距。当悬停在某个类别时，我使用下拉菜单。

我尝试添加margin-top我拥有的每个 css 类/元素，但根本没有效果。我在这里缺课还是有任何解决方法？

这是我认为是可行的解决方案，但它没有附加边距：

#sidebar .subbar li:first-child {
  margin-top: 10px;
}

提前致谢！

HTML：

    <div id="sidebar">
      <header>
        <a href="#">Dasocc</a>
      </header>
      <ul class="nav">
        <li class="countries"><img src="{% static "images/germany.png" %}" alt="germany">1. Bundesliga
          <ul class="subbar">
            <li><a class="team" id="69">FC Bayern München</a></li>
            <li><a class="team" id="70">Borussia Dortmund</a></li>
            <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
            <li><a class="team" id="74">RB Leipzig</a></li>
            <li><a class="team">VfL Wolfsburg</a></li>
            <li><a class="team">SC Freiburg</a></li>
            <li><a class="team">Eintracht Frankfurt</a></li>
            <li><a class="team">Borussia M. Gladbach</a></li>
            <li><a class="team">FC Schalke 04</a></li>
            <li><a class="team">TSG 1899 Hoffenheim</a></li>
            <li><a class="team">1. FC Union Berlin</a></li>
            <li><a class="team">Fortuna Düsseldorf</a></li>
            <li><a class="team">SV Werder Bremen</a></li>
            <li><a class="team">1. FC Köln</a></li>
            <li><a class="team">SC Paderborn</a></li>
            <li><a class="team">FC Augsburg</a></li>
            <li><a class="team">Hertha BSC Berlin</a></li>
          </ul>
        </li>

CSS：

/* Länderkategorien untereinander */
#sidebar .nav .countries {
  padding-top: 10px;
}

/* hovered Team */
#sidebar .nav a:hover {
  color: #FF5B5B;
  font-size: 13px;
  font-weight: bold;
  background-color: #000481;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 0.4em #000481;
}

/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}

/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
  display: none;
  width: 100%;
  padding-top: 15px;
}

/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: table-row;
  list-style: none;
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}
´´´

标签： htmlcss

Answer 1

这是因为在:hover事件中您将 显示<ul>为table-row：

#sidebar .countries:hover .subbar {
  display: table-row;
  ...

实际上，如果您将其显示为 a blockthen 您会发现它以您指定的边距显示，正如您所期望的那样：

#sidebar .countries:hover .subbar {
  display: block;
  ...

下面的代码片段显示了它（尽管它的渲染效果很差）：

#sidebar {
background-color: blue;
}

/* Länderkategorien untereinander */
#sidebar .nav .countries {
  padding-top: 10px;
}

/* hovered Team */
#sidebar .nav a:hover {
  color: #FF5B5B;
  font-size: 13px;
  font-weight: bold;
  background-color: #000481;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 0 0.4em #000481;
}

/* angeklicktes Team */
#sidebar .subbar .team.active {
font-weight: bold;
background-color: #000481;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 0 0.4em #000481;
}

/* Untermenü ausblenden, um dropdown Effekt zu aktivieren */
#sidebar .subbar {
  display: none;
  width: 100%;
  padding-top: 15px;
}

/* Dropdownmenu Funktion */
#sidebar .countries:hover .subbar {
  display: block;
  list-style: none;
}

/* Style Menüpunkte Countries */
.countries {
  text-decoration: none;
  color: #FFF;
  font-size: 14px;
  display: block;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  font-family: 'Muli', sans-serif;
}

/* Einzelne List-Container in Submenü */
#sidebar .subbar li {
  height: 20px;
  line-height: 20px;
  display: inline-block;
  width: 100%;
}

/* Einzelne Teamnamen in Submenü */

#sidebar .subbar .team {
  display:table-cell;
  font-size: 11px;
  font-family: 'Muli', sans-serif;
  padding-left: 33px;
  padding-right: 5px;
}

<div id="sidebar">
  <header>
    <a href="#">Dasocc</a>
  </header>
  <ul class="nav">
    <li class="countries"><img src="" alt="germany">1. Bundesliga
      <ul class="subbar">
        <li><a class="team" id="69">FC Bayern München</a></li>
        <li><a class="team" id="70">Borussia Dortmund</a></li>
        <li><a class="team" id="73">Bayer 04 Leverkusen</a></li>
        <li><a class="team" id="74">RB Leipzig</a></li>
        <li><a class="team">VfL Wolfsburg</a></li>
        <li><a class="team">SC Freiburg</a></li>
        <li><a class="team">Eintracht Frankfurt</a></li>
        <li><a class="team">Borussia M. Gladbach</a></li>
        <li><a class="team">FC Schalke 04</a></li>
        <li><a class="team">TSG 1899 Hoffenheim</a></li>
        <li><a class="team">1. FC Union Berlin</a></li>
        <li><a class="team">Fortuna Düsseldorf</a></li>
        <li><a class="team">SV Werder Bremen</a></li>
        <li><a class="team">1. FC Köln</a></li>
        <li><a class="team">SC Paderborn</a></li>
        <li><a class="team">FC Augsburg</a></li>
        <li><a class="team">Hertha BSC Berlin</a></li>
      </ul>
    </li>
  </ul>
</div>