Html 下拉菜单项在页面加载时显示，需要隐藏直到悬停

我在顶部导航上有两个下拉列表，其中一个下拉列表"Select Year"在你第一次登陆页面时显示，而另一个下拉列表"Select SFA"在你悬停在它上面时正常显示.我正在try 让"Select Year"下拉菜单执行与"Select SFA"相同的操作.我为下拉菜单创建了两个不同的 Select 器，它们都具有相同的属性和值.我需要帮助，我错过了‘ Select 年份’下拉菜单不会显示，直到用户悬停在它上面.

以下是指向html/css代码的链接

我非常感谢任何帮助我解决这个问题的意见.

JSFiddle个

HTML个

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger" href="#">Select SFA</a>
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
             <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
             <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
             <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
             <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 3</a>
            </li>
          </ul>
        </li>
      </ul>
    </div> 
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="v2"></div>
    <div class="vl"></div>
    <div class="nav-container-year">

      <ul class="nav-items">
        <!-- Navigation -->

        <!-- Dropdown menu -->
        <li class="nav-item-select nav-item-dropdown">
          <a class="dropdown-trigger-year" href="#">Select Program Year</a>
          <ul class="dropdown-menu-year">
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 1</a>
            </li>
            <li class="dropdown-menu-item">
              <a href="#">Dropdown Item 2</a>
            </li>
            <li class="dropdown-menu-item">
              <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; 
  }