CSS Nav li hover fill

[Spunky]

The issue I am having is with my menu bar. I have recreated it in JS Fiddle.

Notice that when you hover over any of the drop-down menu list items (any that are short words or not on 2 lines), the hover color does not spread to the right edge, and I am unable to figure out why.

Could somebody take a look at let me know if they have any ideas?

[dsonesuk]

This

#desktop_nav ul li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 5;
}

causes ALL li element to shrink to content, it may be fine for the parent menu, but for submenu list item, not so good, as you have found out, you have to target the submenu li and give them width of 100%.

#desktop_nav ul ul li {


}