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

5 thoughts on “Fix dynamic (drop down) menu pixel nudge/jump display”

  1. Hi,
    I tried this in my custom CSS file all to no avail. I am using the nightandday master file and this doesnt seem to have an effect on the overlay. Is there something I am missing

    PS: sorry for resurrecting a dead thread.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.