Prevent vertical overlapping of sub-menu list items

Question

I have a nested unordered list functioning as a sub-menu however the list items of the sub-menu are overlapping. It appears that padding of the links are overlapping:

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>

How do I prevent the overlap?

Answer 1

The problem is you have padding:10px on a inline level <a> element I think. Try to set it as display:block, so it will render the padding correctly.

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>