If you rollover the “Doctors” button in the main menu navigation you will see that I have split the buttons into three columns. The issue is when you do not have an even number of li’s in the list then the last sub menu item (shown in the bottom right hand corner) does not have a orange stroke above it since there is no li to style. Can someone help me to figure out a way to extend the border-top so that the orange line is visible?
Ralph.m, I spoke too soon. Try rolling over the “Doctors” sub menu. It pushes buttons out of their original space when hovered. And on the other dropdown menu items like under “Services”, you can see the sub menu “bounce” or shift one pixel when you hover over one of the sub menu items.
You are suffering from setting far too many rules in your CSS. For example, you set margins on your <a>, then set them again on A:hover. Don’t do this unless those properties need to change, as they are inherited. Above, we changes the margin on your <a>s, but the rule in your a:hover is overriding what we had, which is a problem you don’t need to have. So, if nothing else, remove this bit in red (line 26):
I see. Its obvious that I am still learning! I did tinker around a bit more and found out that I can add the “margin-bottom: -1px” to the #nav li li instead of the #nav li li a or the #nav li li a:hover and rely on the inheritance. Thanks for looking at this and teaching me. I really appreciate your help!
You’re welcome. Just remember that, if you have styles applying to a link, don’t als add them to the :hover states of the link, because they are inherited anyway, and if you change the link styles later, you’ll get weird results on hover.
For example, you set margins on your <a>, then set them again on A:hover. Don’t do this unless those properties need to change, as they are inherited. Above, we changes the margin on your <a>s, but the rule in your a:hover is overriding what we had, which is a problem you don’t need to have. So, if nothing else, remove this bit in red (line 26):