HTML5 TopNav - help with menu hover color

[dmastri]

I'm having a problem getting the TopNav menu hover color to work. I did some searching on here and noticed a few posts referencing a bug with it not honoring changes made in the GUI skin control and having to insert CSS to fix:

ul.navigation ul.sub-menu
{
background-color: #686868;
}

This fixed my hover colors, but the arrow (caret) that points back up to the first level item is getting drawn over by the list when you hover. See screenshots of my project vs default template. How do I move down my list or move up the caret image?

My project

temp1.jpg

Template example

temp2.png

[dmastri]

If anyone else gets stuck, I solved this one by applying margin-top to ul.navigation ul.sub-menu

[Jbleasdale]

That little carat comes from this bit of CSS.

Code: Select all

ul.navigation > li.has-children:after {
    content: ' ';
    display: block;
    position: absolute;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    border-bottom-color: yellow;
}

If you want to override it's properties, you can do so. In the above example, I changed it from grey to yellow.