My goal is to incorporate dropdown fields with material design only. After researching various examples online, I have noticed a recurring issue. When there are two dropdown items close to each other, they end up overlapping.
Check out this example:
http://codepen.io/sebastianbaumann/pen/bNKReL
<div class="button-group">
<i id="icon"></i>
<a id="input" href="">Choose an option</a>
<ul id="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else </a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Help and Feedback</a></li>
</ul>
</div>
When the dropdown item is duplicated, the functionality breaks down.
Any thoughts on how to resolve this issue?