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

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.

Here is the link to the html/css code

I definitely appreciate any input to help me solve this problem.

JSFiddle

HTML

      <ul >
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li >
          <a  href="#">Select SFA</a>
          <ul >
            <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
             <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
             <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
             <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
             <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div> 
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div >

      <ul >
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li >
          <a  href="#">Select Program Year</a>
          <ul >
            <li >
              <a href="#">Dropdown Item 1</a>
            </li>
            <li >
              <a href="#">Dropdown Item 2</a>
            </li>
            <li >
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

CSS

  .dropdown-menu { 
    display: inline-block;
    position: absolute;
    right: -10px;
    display: none;
    opacity: 1;
    transition: opacity 0.5s ease;
    width: 310px;
    height: 350px; 
    position: absolute !important;
   top: 0em !important;
   right: auto !important;
   z-index: 1000 !important;
   float: left !important;
   min-width: 10rem !important;
    padding: .5rem 0 !important;
    margin: var(--linq-spacing-6) !important;
    margin-left: var(--linq-spacing-2);
    font-size: 1rem !important;
    color: #212529 !important;
    text-align: left !important;
    list-style: none !important;
    background-color: var(--linq-color-gray-100) !important;
    color: var(--linq-color-gray-700);
    background-clip: padding-box !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    border-radius: .25rem !important;}

 .dropdown-menu a {
   color: #fff;
 }

.dropdown-menu-year {
  position: absolute;
  right: -10px;
 opacity: 1;
 transition: opacity 0.5s ease;
 width: 160px;
 height: 150px;
 position: absolute !important;
 top: 0em !important;
 right: auto !important;
 z-index: 1000 !important;
 float: left !important;
 min-width: 10rem !important;
 padding: .5rem 0 !important;
 margin: var(--linq-spacing-6) !important;
 margin-left: var(--linq-spacing-2);
 font-size: 1rem !important;
 color: #212529 !important;
 text-align: left !important;
 list-style: none !important;
 background-color: var(--linq-color-gray-100) !important;
 color: var(--linq-color-gray-700);
 background-clip: padding-box !important;
 border: 1px solid rgba(0, 0, 0, 0.15) !important;
 border-radius: .25rem !important;}

.dropdown-menu-year a {
  color: #fff; 
 }

.dropdown-trigger {
  position: relative;
  color: var(--linq-color-gray-700) !important; 
  }

.dropdown-trigger:focus {
  display: block;
  opacity: 1; 
 }

 .dropdown-trigger::after {
   content: "›";
   position: absolute;
   color: var(--linq-color-gray-700);
   font-size: 24px;
   font-weight: bold;
   transform: rotate(90deg);
   top: -5px;
   right: -15px; }

.dropdown-trigger-year {
  position: relative;
  color: var(--linq-color-gray-700) !important;
 }
 .dropdown-trigger-year:focus {
   display: block;
   opacity: 1; 
 }

 .dropdown-trigger-year::after {
   content: "›";
   position: absolute;
   color: var(--linq-color-gray-700);
   font-size: 24px;
   font-weight: bold;
   transform: rotate(90deg);
   top: -5px;
   right: -15px; 
  }

.nav-container-year:hover .dropdown-menu {
  display: block; 
 }

.nav-item-dropdown {
   position: relative;
   color: var(--linq-color-gray-700) !important; 
 }
.nav-item-dropdown:hover > .dropdown-menu {
   display: block;
   opacity: 1;
  }

 .nav-item-dropdown {
   position: relative;
   color: var(--linq-color-gray-700) !important; 
  }

 .nav-item-dropdown:hover > .dropdown-menu-year {
   display: block;
   opacity: 1; 
  }

CodePudding user response：

First you need to hide the menu that is showing.

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

Then you need to create the CSS trigger event to show it.

.dropdown-trigger-year:hover   .dropdown-menu-year {
  display: block;
}

JSFiddle