This is one of those situations where I’ve done a work-around but never figured out exactly why I needed to. I’ve attached a screen grab showing the elements in question.
I have a simple navbar link styled as “main nav links”. I add a dropdown link next to it and assign it as “main nav links”. All remains the same except that the dropdown version is positioned 10px lower than the simple non-dropdown version. I run into this all the time and usually just add a sub-style and move it’s relative position up 10px to accommodate. No biggie, just wondering why I have to do this.
I’ve tried adding the “main nav links” style to the main “Dropdown” component but this requires that I go in and change the “Dropdown Toggle” style to remove the native padding but I end up losing my rollover styling on the main component.
I then try adding “main nav links” style to the dropdown toggle element and the relative position shifts down 10 pixels. Can’t figure out why. My first assumption is that the main dropdown component must have some kind of native position shift, but as far as I can tell it does not. (does have relative positioning and and index of 900).