After using the menu editor in the admin interface to modify the menu structure, an ugly problem showed up. I had created a subpage, but the drop down menu wasn’t showing. Instead, a scroll bar appeared in the header when I moved my mouse over the menu item, and unless I put focus on the header first so I could scroll down with the arrow keys later, I couldn’t see the menu item at all. Also, the colour was all wrong. The sub-item showed up with a dark gray background colour and black text, not exactly the most readable combination.
Fix the Scrollbars
Scrollbars appear when the
overflow property in CSS is set to auto. I found the offending line in
#header and removed it. However, the header’s colour no longer filled the header section. It didn’t have enough height. The wrapper <div> container was not expanding to include the heights of the elements.
To solve this, I simply added
height: 144px to
#branding. The value of 144px came from adding the height values of the contained <div> blocks. The header colour now expands to fill the header section, just like it had before.
Fix the Colours
Examining the elements in Google Chrome revealed that the colours for nested menus are controlled by a few CSS selectors. Note that these are for the twenty ten theme, different themes might use different CSS selectors.
For the current item the mouse is over, the selector is
#menu-main .menu-item a:hover
For the unselected parent, the selector is
#access li:hover > a, #access ul ul :hover > a
For the child item, the selector is
#access ul ul a
background-color property in these selectors and that’s it!