防止子菜单列表项的垂直重叠

Question

我有一个嵌套的无序列表用作子菜单，但是子菜单的列表项重叠。看起来链接的填充是重叠的：

ul {
  padding: 12px 0;
  list-style: outside none none;
}
li {
  display: inline-block;
  margin-right: 6px;
}
a {
  text-decoration: none;
}
a.selected-language {
  background-color: #000;
  color: #fff;
  padding: 10px;
}
ul.language-list {
  position: absolute;
  z-index: 1000;
}
ul.language-list li {
  display: block;
  position: relative;
}
ul.language-list li a {
  background-color: #000;
  color: #fff;
  padding: 10px;
}

<ul>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li class="language-selection">
    <a title="foo" href="#" class="selected-language">
      <span>bar</span>
    </a>
    <ul class="language-list">
      <li>
        <a title="foo" href="#">
          <span>bar</span>
        </a>
      </li>
      <li>
        <a title="foo" href="#">
          <span>bar</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

如何防止重叠？

Answer 1

问题是我认为 padding:10px 在内联级别 <a> 元素上。尝试将其设置为 display:block，这样它将正确呈现 padding。

ul.language-list li a {
  ...
  display: block;
}

ul {
  padding: 12px 0;
  list-style: outside none none;
}
li {
  display: inline-block;
  margin-right: 6px;
}
a {
  text-decoration: none;
}
a.selected-language {
  background-color: #000;
  color: #fff;
  padding: 10px;
}
ul.language-list {
  position: absolute;
  z-index: 1000;
}
ul.language-list li {
  display: block;
  position: relative;
}
ul.language-list li a {
  background-color: #000;
  color: #fff;
  padding: 10px;
  display: block; /*added*/
}

<ul>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li class="language-selection">
    <a title="foo" href="#" class="selected-language">
      <span>bar</span>
    </a>
    <ul class="language-list">
      <li>
        <a title="foo" href="#">
          <span>bar</span>
        </a>
      </li>
      <li>
        <a title="foo" href="#">
          <span>bar</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

防止子菜单列表项的垂直重叠

Prevent vertical overlapping of sub-menu list items

html

css

padding

drop-down-menu