Dropdown menu items show on page load, needs to be hidden until hover

I have two dropdowns on the top navigation and one of the dropdowns ‘Select Year’ shows when you first land on the page while the other dropdown ‘Select SFA’ acts properly and shows when you hover over it. I am trying to get the ‘Select Year’ dropdown to do the same thing as ‘Select SFA’. I created two different selectors for the dropdowns and both have the same identical properties and values. I need assistance on what I’m missing that the ‘Select Year’ dropdown won’t show until a user hovers over it.

Paul was very helpful with this page in one of my last posts here but I definitely appreciate any input from anyone to help me solve this problem.

Could you just update the <ul class="dropdown-menu-year"> class to be dropdown-menu year ? Then you could remove the entire CSS bit you have for .dropdown-menu-year which looks like its a copy/paste of the .dropdown-menu and you’d have the extra year class to make adjustments to that specific menu.

1 Like

You are missing the display:none on dropdown-menu-year (which you have in place on .dropdown-menu).

.dropdown-menu-year{display:none;}

Your two navs are not centred vertically because they have a margin-bottom which offsets the center position. Do this:


.nav-items{margin-bottom:0;}

As @RyanReese said why have you duplicated all the css as it seems t be exactly the same as the other one. Use the same code and just modify with an extra class if needed.

You are using !important eway too much. I don’t think I used one in the last 10 sites I did. :slight_smile:

Also remember that hover only works properly on mouse devices and touch may or may not work properly with it.

1 Like

Thanks this solved it. Thanks again Paul

1 Like