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

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如何防止重叠？

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>