jQuery: Remove inline "display:none"

Question

I'm trying to figure out how to remove some inline styles from the current menu item in the navigation that jQuery is adding on hover. After hover, I want to still see the current menu item but the jQuery is adding display:none/

I added "display:block;" to the CSS for .current-menu-item but when hovering on nav, the jQuery is trigged and that is overridden by inline style="overflow: hidden; display: none;" in

<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-31 current_page_item menu-item-33"><a href="http://clients.weinsteinau.cgvcreative.com/opportunities/">Opportunities</a></li>

Repro: 1. Go here: http://clients.weinsteinau.cgvcreative.com/opportunities/

1. Note that the menu item that corresponds to the page appears below the navigation

2. Hover over nav

3. Note that the name of the page disappears from the navigation

Expected: Hovering over nav should trigger all items to appear. After hover, the current menu item should retain display:block so it's still visible to the user.

I appreciate any help. Thanks!

Answer 1

Use !important, this will help overwrite inline styles from CSS here you can find more more information.

Here is how I fixed your CSS:

/* line 90, ../scss/_nav.scss */ .navigation ul li ul li.current-menu-item, .navigation ul li ul li.current_page_item, .navigation ul li ul li.current-page-ancestor { display: block !important; color: red; }