Menu icon Foundation
Hover Dropdown Removes Background...

I just updated a site to 5.0.3 from 5.0.2. When I did the background which was transparent on the topbar became a black background again. Easily removed but now when you hover over a dropdown the menu doesn't show. In 5.0.2 it should become black background but it no longer does this and I cannot figure out how to fix it.

Here is a video showing the example: http://screencast.com/t/29z6CKl0N

What should happen is when you hover over a dropdown item the main nav item has a black background. How do I fix this?

Here is the site in question: http://tinyurl.com/kks9x6p

Thank you for the help!

topbarhovernav

I just updated a site to 5.0.3 from 5.0.2. When I did the background which was transparent on the topbar became a black background again. Easily removed but now when you hover over a dropdown the menu doesn't show. In 5.0.2 it should become black background but it no longer does this and I cannot figure out how to fix it.

Here is a video showing the example: http://screencast.com/t/29z6CKl0N

What should happen is when you hover over a dropdown item the main nav item has a black background. How do I fix this?

Here is the site in question: http://tinyurl.com/kks9x6p

Thank you for the help!


Lynda Spangler gave the most helpful answer for this post
Lynda Spangler almost 5 years ago

I looked at it again and by chance I did find the solution!

It is this line of CSS:

.top-bar-section ul li:hover > a {
    background: #272727;
    color: white;
}

My CSS was overriding the background but not the color. By overriding the color the background stays transparent as I intended but the text doesn't disappear now. =>

JCJ80 about 5 years ago

Hi,

A long shot I know, did you get anywhere with this issue?

I am trying to effect the styling of the a "has drop down" when the cursor leaves it to navigate the dropdown below.

Thanks

Gareth Edwards almost 5 years ago

I'm having the same issue too. Any luck solving this?

Lynda Spangler almost 5 years ago

I looked at it again and by chance I did find the solution!

It is this line of CSS:

.top-bar-section ul li:hover > a {
    background: #272727;
    color: white;
}

My CSS was overriding the background but not the color. By overriding the color the background stays transparent as I intended but the text doesn't disappear now. =>