My nested unordered list acting as a sub-menu has an issue with overlapping list items. It seems like the padding of the links is causing the overlap:
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>Is there a way to fix the list item overlap issue?