带下拉菜单的流畅响应式导航

Question

我为我的项目设计了一个导航系统，该系统建立在unsplash

之类的 flexbox 上

代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ===========================
       For Main Navigation
   =========================== */

.cm-navigation-area {
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.6s ease-in-out;
  z-index: 5;
  display: block;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.cm-navigation {
  background: #ffffff;
  height: 70px;
  display: flex;
  justify-content: space-between;
}

@media (max-width: 768px) {
  .cm-navigation {
    margin: 0 -5%;
  }
}

.cm-burger-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

#burger-nav {
  fill: #575757;
}

.cm-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cm-logo a img {
  width: auto;
  height: 50px;
}

@media (max-width: 991px) {
  .cm-logo a img {
    width: 80px;
    height: auto;
  }
}

.cm-nav nav {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cm-nav nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.cm-nav nav ul li {
  list-style: none;
  display: flex;
}

.cm-nav nav ul li:not(:last-child) {
  margin-right: 1.8em;
}

@media (max-width: 991px) {
  .cm-nav nav ul li:not(:last-child) {
    margin-right: 10;
  }
}

.cm-nav nav ul li a {
  font-size: 0.9em;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
  font-weight: 300;
}

.cm-nav nav ul li a span {
  padding-right: 0.4em;
}

.cm-nav nav ul li a span img {
  width: 13px;
  height: auto;
}

@media (max-width: 991px) {
  .cm-nav nav ul li a span img {
    width: 18px;
    height: auto;
  }
}

@media (max-width: 768px) {
  .nav-r-text {
    display: none;
  }
}

.cm-currency {
  font-size: 0.8em;
}

.cm-currency .cm-currency-link span {
  margin-right: 0 !important;
}

.cm-currency .cm-currency-link span img {
  width: 10px !important;
}

.cm-dots {
  margin-right: 2.5em !important;
}

.cm-submit-photo {
  margin-right: 48px !important;
}

.cm-submit-photo-link {
  transition: all 0.2s ease-in-out;
  display: flex;
  background: #fff;
  border: 1px solid #dddddd;
  color: gray !important;
  text-decoration: none;
  padding: 0 11px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: 100 !important;
  font-size: 14px;
  text-transform: uppercase;
  height: 32px;
}

.cm-submit-photo-link:hover {
  border: 1px solid #dedede;
  color: #dedede;
}

.cm-join-button {
  position: relative;
}

.cm-join-button:before {
  position: absolute;
  top: 0;
  left: -24px;
  display: inline-block;
  width: 1px;
  height: 32px;
  content: "";
  background-color: gray;
}

.cm-join-button-link {
  transition: all 0.3s ease-in-out;
  display: flex;
  background: green;
  color: #ffffff !important;
  text-decoration: none;
  padding: 0 11px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-weight: 100 !important;
  font-size: 14px;
  text-transform: uppercase;
  height: 32px;
}

.cm-join-button-link:hover {
  background: #004d00;
}

.cm-user-link img {
  height: 30px;
  width: auto;
}

.cm-cart {
  min-height: 30px;
}

#cm-cart-link {
  position: relative;
}

#cm-cart-link .cart-img {
  width: 16px;
  height: auto;
}

#cm-cart-link .cm-cart-badge:after {
  position: absolute;
  right: -6px;
  top: 0;
  content: attr(data-count);
  font-size: 60%;
  width: 16px;
  height: 16px;
  padding: 0.3em;
  border-radius: 50%;
  line-height: 1em;
  color: white;
  background: green;
  text-align: center;
  min-width: 1.2em;
}


/* ===================================
       Navbar Search Integrations
   =================================== */

.cm-nav-searchbar {
  display: flex;
  flex: 1;
  align-items: center;
  height: 100%;
  padding: 0 1em;
}

@media (max-width: 1200px) {
  .cm-nav-searchbar {
    display: none;
  }
}

.cm-nav-searchbar .field-container {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.cm-nav-searchbar .icons-container {
  position: absolute;
  top: 12px;
  right: 4px;
  width: 35px;
  height: 35px;
  overflow: hidden;
}

.cm-nav-searchbar .icon-search {
  position: relative;
  top: 5px;
  left: 8px;
  width: 40%;
  height: 40%;
  opacity: 1;
  border-radius: 50%;
  border: 2px solid #bebebe;
  transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}

.cm-nav-searchbar .icon-search:after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: -2px;
  width: 2px;
  border-radius: 3px;
  transform: rotate(-45deg);
  height: 8px;
  background-color: #bebebe;
}

.cm-nav-searchbar .search-field {
  border: 0;
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  background: #f7f7f7;
  border-radius: 3px;
  transition: all 0.4s ease;
}

.cm-nav-searchbar .search-field:focus {
  outline: none;
}

.cm-nav-searchbar .search-field:focus+.icons-container .icon-close {
  opacity: 1;
  transform: translateX(0);
}

.cm-nav-searchbar .search-field:focus+.icons-container .icon-search {
  opacity: 0;
  transform: translateX(200%);
}


/* ========================
    Mobile Searchbar
   ======================== */

.cm-nav-searchbars {
  display: flex;
  flex: 1;
  align-items: center;
  height: 100%;
  margin-top: 70px;
}

@media (min-width: 1200px) {
  .cm-nav-searchbars {
    display: none;
  }
}

.cm-nav-searchbars .field-containers {
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  height: 50px;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}

.cm-nav-searchbars .icons-containers {
  position: absolute;
  top: 12px;
  right: 4px;
  width: 35px;
  height: 35px;
  overflow: hidden;
}

.cm-nav-searchbars .icon-searchs {
  position: relative;
  top: 5px;
  left: 8px;
  width: 40%;
  height: 40%;
  opacity: 1;
  border-radius: 50%;
  border: 2px solid #bebebe;
  transition: opacity 0.25s ease, transform 0.43s cubic-bezier(0.694, 0.048, 0.335, 1);
}

.cm-nav-searchbars .icon-searchs:after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: -2px;
  width: 2px;
  border-radius: 3px;
  transform: rotate(-45deg);
  height: 8px;
  background-color: #bebebe;
}

.cm-nav-searchbars .search-fields {
  border: 0;
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  background: #f7f7f7;
  border-radius: 3px;
  transition: all 0.4s ease;
}

.cm-nav-searchbars .search-fields:focus {
  outline: none;
}

.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-closes {
  opacity: 1;
  transform: translateX(0);
}

.cm-nav-searchbars .search-fields:focus+.icons-containers .icon-searchs {
  opacity: 0;
  transform: translateX(200%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<!--=============================
           Main Navigation
    =============================-->
<div class="cm-navigation-area">
  <div class="cm-navigation px-5-percent">

    <!--Off Canvas Mobile Optimize Burger Menu -->
    <div class="cm-burger-nav d-flex d-md-none">
      <span>
                <svg xmlns:xlink="http://www.w3.org/1999/xlink" height="32px" id="burger-nav" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
                </svg>
          </span>
    </div>
    <!--End Off Canvas Mobile Optimize Burger Menu -->

    <div class="cm-logo">
      <a class="cm-logo-link" href="">
        <img src="https://i.imgur.com/lAMzwZj.png" alt="codesign">
      </a>
    </div>

    <div class="cm-nav-searchbar">
      <fieldset class="field-container">
        <input type="text" placeholder="Search Photos Here" class="search-field" />
        <div class="icons-container">
          <div class="icon-search"></div>
        </div>
      </fieldset>
    </div>

    <div class="cm-nav mr-md-2">
      <nav>
        <ul>
          <li class="cm-currency">
            <a class="cm-currency-link" href="">
              <span>BDT</span>
              <span><img src="https://i.imgur.com/HSaVJVb.png" alt=""></span>
            </a>
          </li>

          <li class="cm-explore">
            <a href="image-category.html">
              <span><img src="https://i.imgur.com/NezIKT7.png" alt=""></span>
              <span class="nav-r-text">Explore</span>
            </a>
          </li>

          <li class="cm-collection d-none d-md-flex">
            <a href="./dashboard/dashboard-images.html">
              <span><img width="25px" src="https://i.imgur.com/8amvUJB.png" alt=""></span>
              <span class="nav-r-text">Collection</span>
            </a>
          </li>

          <li class="cm-dots d-none d-md-flex">
            <a href="">
              <img width="25" src="https://i.imgur.com/Yu0uhKs.png" alt="">
            </a>
          </li>

          <li class="cm-cart">
            <a id="cm-cart-link" href="javascript:void(0)">
              <span class="cm-cart-badge has-badge" data-count="2"></span>
              <span><img class="cart-img" src="https://i.imgur.com/XMiXKD4.png" alt=""></span>
            </a>
          </li>

          <li class="cm-user d-flex d-md-none">
            <a class="cm-user-link" href="">
              <span>
                                <img width="25" src="https://i.imgur.com/4vD2Hwp.png" alt="">
                            </span>
              <span class="nav-r-text">Login</span>
            </a>
          </li>

          <li class="cm-submit-photo d-none d-md-flex">
            <a class="cm-submit-photo-link" href="submit-image.html">
              <!--<span>-->
              <!--<img src="images/s_photo.svg" alt="">-->
              <!--</span>-->
              <span> Submit a photo </span>
            </a>
          </li>

          <!--<li class="cm-user">-->
          <!--<a class="cm-user-link" href="">-->
          <!--<span>-->
          <!--<img src="images/user.svg" alt="">-->
          <!--</span>-->
          <!--<span class="nav-r-text">Login</span>-->
          <!--</a>-->
          <!--</li>-->

          <li class="cm-join-button d-none d-md-flex">
            <a class="cm-join-button-link" href="">Login | Signup</a>
          </li>

        </ul>
      </nav>
    </div>

  </div>
</div>

<div class="cm-nav-searchbars">
  <fieldset class="field-containers">
    <input type="text" placeholder="Search Photos Here" class="search-fields" />
    <div class="icons-containers">
      <div class="icon-searchs"></div>
    </div>
  </fieldset>
</div>

它看起来很灵敏，但有些不灵敏，在灵敏时看起来也不漂亮，我还需要一个下拉菜单，例如点悬停或单击事件时不飞溅。

预先感谢