CSS: How to stop LI widening in drop down menu

Question

I have a relativelly well working drop down menu for what I want, but there's one unintended bug that I'm not sure how to resolve. Consider this JSFiddle. The bug is most obvious when you hover over {A}. Because the nest UL has lots of elements it widens to the right, but the parent LI also widens to fit it, which makes its nested A fill the width, which makes the UI expand and contract. How can I keep the parent LI from expanding to the width of the nested UL? The other nested ULs don't show the bug, but that's only because their nested LIs are empty.

Answer 1

is this a static list?

if so just add a class to the

<a class="Afixded">{A} ▾</a>

and then goes into the css

li a.Afixded{width:40px;}

JsFiddle