Fix dynamic (drop down) menu pixel nudge/jump display

The issue: you start working with CSS to make the global navigation (top navigation) items look like tabs, solid boxes, etc.

Sample blocking of top navigation

If you are using dynamic (drop down) menus, you run into an alignment issue with the drop down container NOT aligning with the colored navigation item:

Showing the pixel nudge for drop down menu

After digging around I found the culprit… an inline style that is added to the UL element when you hover over the item:

<ul class="dynamic" style="left: -1px">

I don’t want to target the dynamic class, since it is used so much in SharePoint.  So instead I wrote a CSS rule that looks for the presence of the -1px and then resets it back to zero:

/* Corrects inline style that is added when you hover over an ul.dynamic element */
.menu ul.dynamic[style*="left: -1px"] {
left: 0 !important; /* !important needed to override inline style */
}

And you eliminate the pixel nudge.  🙂

The fixed menu