The issue: you start working with CSS to make the global navigation (top navigation) items look like tabs, solid boxes, etc.
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:
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.
I was looking for the RSS feed of this blog but can’t find one ..
Thanks for the note! The feed is available through your browser tools and we will be adding a link to it on the site itself. The URL is http://blog.sharepointexperience.com/feed/.
I love the way you targeted the inline style using CSS! This will come in handy. Thanks so much for posting!
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.
Cheers
Louis, please take a screenshot and copy the code (view source from the browser) and send it to me at http://blog.sharepointexperience.com/csschallenge/. I will take a look.