当位置相对导航链接未悬停时，绝对定位的巨型菜单消失

Question

我有一个标题，每个导航链接都会下拉一个超级菜单，但由于超级菜单是绝对定位的，因此它位于相对定位的导航的“顶部”。因此，当我尝试移动到大型菜单时，它会消失，以及导航链接的悬停边框底部。

通常我的问题只是填充，但这次似乎并非如此。我正在尝试保持我的边界底部功能以及能够访问我的大型菜单。

结果是：（点击打开sn-p）

#navigation {
        padding-top: 16px;
        padding-bottom: 5px;
        border-bottom: 1px solid #979797;
        background-color: #FFFFFF;
    }
    .hello>li {
        padding: 0px 15px 0px 15px;
    }
    .hello>li>a {
        color: #4A4A4A;
        padding: 20px 15px 46px;
        margin-bottom: 0px;
    }
    .hello>li:first-child a:hover {
        border-bottom: none;
        padding-bottom: 0px;
        text-decoration: none;
        margin-bottom: 0px;
    }
    .hello>li:first-child {
        padding-left: 0px;
    }
    .hello>li:last-child {
        padding-right: 0px;
    }
    .hello>li>a:hover, .hello>li>a:visited, .hello>li>a:focus, .hello>li>a:active {
        text-decoration: none;
        color: #4A4A4A;
        border-bottom: 4px solid #8DB9CA;
        padding-bottom: 33px;
    }
    .hello>li>a:hover + .dropdown-menu {
        display: block;
        padding-top: 30px;
    }
    #navigation ul.hello .dropdown-menu .nav-drop-list-block li {
        display: block;
        text-align: left;
    }
    #navigation ul.hello .dropdown-menu .nav-drop-list-block p {
        display: block;
        text-align: left;
    }
    .dropdown-menu { 
        position: absolute; 
        width: 100%; 
        text-align: center; 
        top: 70px;
        border-radius: 0px;
        margin-top: 0px;
        padding-top: 30px;
    }
    .dropdown-menu>li>a {
        color: #4A4A4A;
    }
    .dropdown{ 
        position: static;
    }
    .dropdown-container {
        position: static;
    }
    #navigation ul.hello li {
        display: inline-block;
    } 
    #search-desk-block {
        display: block;
        float: right;
        position: relative;
        top: 20px;
    }
    #search-desk-block {
        position: relative;
    }
    #search-desk-block input {
        width: 250px;
        border-color: #63666A;
        border-radius: 6px;
    }
    .search-desk-icon {
        position: absolute;
        right: 9px;
        bottom: 20px;
    }
    .search-desk-icon svg {
        font-size: 20px;
    }
    .nav-drop-img {
        max-width: 253px;
    }

    @media (max-width: 1199px) {
        .hello>li {
            padding: 0px 5px 0px 5px;
        }
        .hello>li>a {
            color: #4A4A4A;
            padding: 20px 5px 46px;
            margin-bottom: 0px;
        }
    }
    @media (max-width: 991px) {
        #navigation {
            display: none;
        }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="header">
  <section id="navigation">
    <div class="container">
      <div class="row">
          <div class="col-md-12 dropdown-container">
              <div class="dropdown">
                  <ul class="hello">
                      <li>
                          <a href="">
                              <img src="assets/img/danze-logo-main.png" style="max-width: 160px;" />
                          </a>    
                      </li>
                      <li>
                          <a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true">
                              KITCHEN
                          </a>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
                              <div class="container">
                                  <div class="row">
                                      <div class="col-sm-3">
                                          <ul class="nav-drop-list-block">
                                              <p>
                                                  PRODUCTS
                                              </p>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Pull down/ pull out faucets
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Single Handle Faucets
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Two Handle Faucets
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Dual Control Faucets
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Pot Fillers
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Bar &amp; Convenience Faucets
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Accessories
                                                  </a>
                                              </li>
                                          </ul>
                                          <ul class="nav-drop-list-block">
                                              <p>
                                                  STYLE
                                              </p>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Contemporary
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Traditional
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Transitional
                                                  </a>
                                              </li>
                                          </ul>
                                      </div>
                                      <div class="col-sm-3">
                                          <ul class="nav-drop-list-block">
                                              <p>
                                                  FINISH
                                              </p>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Chrome
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Stainless Steel
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Oil Rubbed Bronze
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Satin Black
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Antique Copper
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Polished Nickel
                                                  </a>
                                              </li>
                                          </ul>
                                      </div>
                                      <div class="col-sm-3">
                                          <ul class="nav-drop-list-block">
                                              <p>
                                                  COLLECTION
                                              </p>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Amalfi&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Antiock&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Draper
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Melrose&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Midtown&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Opulence&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Parma&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Parma&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Prince&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Selene&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Sirius&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      The Foodie&trade;
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      Vaughn
                                                  </a>
                                              </li>
                                          </ul>
                                      </div>
                                      <div class="col-sm-3">
                                          <img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" />
                                      </div>
                                  </div>
                              </div>
                          </ul>
                      </li>
                      <li>
                          <a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true">
                              BATHROOM
                          </a>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      hello
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      how are you
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      im fine
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      been doing well
                                  </a>
                              </li>
                              <li role="presentation" style="color:green">
                                  how about you?
                              </li>
                          </ul>
                      </li>
                      <li>
                          <a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true">
                              PROFESSIONALS
                          </a>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
                              <div class="container">
                                  <div class="row">
                                      <div class="col-sm-4">
                                          <ul>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      tired
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      hungry
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      sleepy
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      toothy
                                                  </a>
                                              </li>
                                          </ul>
                                      </div>
                                      <div class="col-sm-4">
                                          <ul>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      tired
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      hungry
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      sleepy
                                                  </a>
                                              </li>
                                              <li role="presentation">
                                                  <a role="menuitem" tabindex="-1" href="#">
                                                      toothy
                                                  </a>
                                              </li>
                                          </ul>
                                      </div>
                                      <div class="col-sm-4">
                                          <img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" />
                                      </div>
                                  </div>
                              </div>
                          </ul>
                      </li>
                      <li>
                          <a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true">
                              INNOVATIONS
                          </a>
                          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      Action
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      Another action
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      Something else here
                                  </a>
                              </li>
                              <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="#">
                                      Separated link
                                  </a>
                              </li>
                              <li role="presentation" style="color:green">
                                  Yay! The menu extends the full width of the page
                              </li>
                          </ul>
                      </li>
                      <li id="search-desk-block">
                          <form>
                              <div class="form-group">
                                  <input type="text" class="form-control" placeholder="Search" />
                                  <span class="search-desk-icon">
                                      <i class="fas fa-search"></i>
                                  </span>
                              </div>
                          </form>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</section>

另外，这里有一个小提琴：https://codepen.io/kmgiffin/pen/qYbyxo/

Answer 1

问题在于你的 css 中的以下行：

 .hello>li>a:hover + .dropdown-menu {
                    display: block;
                    padding-top: 30px;
                }

在这里，您将悬停触发器放置在锚标记上，但是一旦将光标从锚移到下拉菜单上，锚将不再处于悬停状态，因此该规则不再适用，您的下拉菜单将恢复为初始状态状态。

以下是针对li 元素的修复程序。由于dropdown-menu 是li 的子元素，因此当您将鼠标悬停在dropdown-menu 元素上时，您在技术上仍将鼠标悬停在li 父元素上

.hello>li:hover > .dropdown-menu {
            display: block;
            padding-top: 30px;
        }

Answer 2

#navigation {
  padding-top: 16px;
  padding-bottom: 5px;
  border-bottom: 1px solid #979797;
  background-color: #FFFFFF;
}
.hello>li {
  padding: 0px 15px 0px 15px;
}
.hello>li>a {
  color: #4A4A4A;
  padding: 20px 15px 46px;
  margin-bottom: 0px;
}
.hello>li:first-child a:hover {
  border-bottom: none;
  padding-bottom: 0px;
  text-decoration: none;
  margin-bottom: 0px;
}
.hello>li:first-child {
  padding-left: 0px;
}
.hello>li:last-child {
  padding-right: 0px;
}
.hello>li>a:hover, .hello>li>a:visited, .hello>li>a:focus, .hello>li>a:active {
  text-decoration: none;
  color: #4A4A4A;
  border-bottom: 4px solid #8DB9CA;
  padding-bottom: 33px;
}
.hello>li>a:hover + .dropdown-menu {
  display: block;
  padding-top: 30px;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block li {
  display: block;
  text-align: left;
}
#navigation ul.hello .dropdown-menu .nav-drop-list-block p {
  display: block;
  text-align: left;
}
.dropdown-menu { 
  position: absolute; 
  width: 100%; 
  text-align: center; 
  top: 70px;
  border-radius: 0px;
  margin-top: 0px;
  padding-top: 30px;
}
.dropdown-menu>li>a {
  color: #4A4A4A;
}
.dropdown{ 
  position: static;
}
.dropdown-container {
  position: static;
}
#navigation ul.hello li {
  display: inline-block;
} 
#search-desk-block {
  display: block;
  float: right;
  position: relative;
  top: 20px;
}
#search-desk-block {
  position: relative;
}
#search-desk-block input {
  width: 250px;
  border-color: #63666A;
  border-radius: 6px;
}
.search-desk-icon {
  position: absolute;
  right: 9px;
  bottom: 20px;
}
.search-desk-icon svg {
  font-size: 20px;
}
.nav-drop-img {
  max-width: 253px;
}

@media (max-width: 1199px) {
  .hello>li {
    padding: 0px 5px 0px 5px;
  }
  .hello>li>a {
    color: #4A4A4A;
    padding: 20px 5px 46px;
    margin-bottom: 0px;
  }
}
@media (max-width: 991px) {
  #navigation {
    display: none;
  }
}
ul.dropdown-menu:hover {
display: block;
}

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

<div id="header">
<section id="navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-12 dropdown-container">
        <div class="dropdown">
          <ul class="hello">
            <li>
              <a href="">
                <img src="assets/img/danze-logo-main.png" style="max-width: 160px;" />
              </a>    
            </li>
            <li>
              <a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true">
                KITCHEN
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
                <div class="container">
                  <div class="row">
                    <div class="col-sm-3">
                      <ul class="nav-drop-list-block">
                        <p>
                          PRODUCTS
                        </p>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Pull down/ pull out faucets
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Single Handle Faucets
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Two Handle Faucets
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Dual Control Faucets
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Pot Fillers
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Bar &amp; Convenience Faucets
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Accessories
                          </a>
                        </li>
                      </ul>
                      <ul class="nav-drop-list-block">
                        <p>
                          STYLE
                        </p>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Contemporary
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Traditional
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Transitional
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-3">
                      <ul class="nav-drop-list-block">
                        <p>
                          FINISH
                        </p>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Chrome
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Stainless Steel
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Oil Rubbed Bronze
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Satin Black
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Antique Copper
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Polished Nickel
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-3">
                      <ul class="nav-drop-list-block">
                        <p>
                          COLLECTION
                        </p>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Amalfi&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Antiock&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Draper
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Melrose&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Midtown&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Opulence&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Parma&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Parma&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Prince&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Selene&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Sirius&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            The Foodie&trade;
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            Vaughn
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-3">
                      <img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" />
                    </div>
                  </div>
                </div>
              </ul>
            </li>
            <li>
              <a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true">
                BATHROOM
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    hello
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    how are you
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    im fine
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    been doing well
                  </a>
                </li>
                <li role="presentation" style="color:green">
                  how about you?
                </li>
              </ul>
            </li>
            <li>
              <a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true">
                PROFESSIONALS
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
                <div class="container">
                  <div class="row">
                    <div class="col-sm-4">
                      <ul>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            tired
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            hungry
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            sleepy
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            toothy
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <ul>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            tired
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            hungry
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            sleepy
                          </a>
                        </li>
                        <li role="presentation">
                          <a role="menuitem" tabindex="-1" href="#">
                            toothy
                          </a>
                        </li>
                      </ul>
                    </div>
                    <div class="col-sm-4">
                      <img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" />
                    </div>
                  </div>
                </div>
              </ul>
            </li>
            <li>
              <a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true">
                INNOVATIONS
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    Action
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    Another action
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    Something else here
                  </a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">
                    Separated link
                  </a>
                </li>
                <li role="presentation" style="color:green">
                  Yay! The menu extends the full width of the page
                </li>
              </ul>
            </li>
            <li id="search-desk-block">
              <form>
                <div class="form-group">
                  <input type="text" class="form-control" placeholder="Search" />
                  <span class="search-desk-icon">
                    <i class="fas fa-search"></i>
                  </span>
                </div>
              </form>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>