html - 带箭头的 CSS 下拉菜单

Question

我正在尝试创建一个应该有 2 级下拉菜单的下拉菜单。我想要一个菜单​​项(产品)，当我将鼠标悬停在它的子菜单(我们的品牌)上时，它应该带有一个箭头并下拉到一边。

演示:- https://jsfiddle.net/nnefhpxf/

HTML

<div id="navbar-collapse-grid" class="navbar-collapse collapse">
 <ul class="nav navbar-nav" id = "drop-nav">            
  <li><a class="active" href="index.html">Home</a></li>
  <li class="dropdown">
    <a href="aboutus.html" class="dropbtn">Our Company</a>
    <div class="dropdown-content">
      <a href="#">Company Overview</a>
      <a href="#">Management</a>
      <a href="#">Manufacturing</a>
      <a href="#">Business</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="products.html" class="dropbtn">Product</a>
    <div class="dropdown-content">
      <a href="#">Our Brand</a>
        <ul>
            <li><a href="#">Intes-o</a></li>
            <li><a href="#">Frig-M</a></li>
            <li><a href="#">Rahat</a></li>
            <li><a href="#">Zesund</a></li>
            <li><a href="#">Bioti 1gm I.V</a></li>
            <li><a href="#">Vomiss I.V</a></li>            
        </ul>
      <a href="#">New Brand Releases</a>
    </div>
  </li>
  <li><a href="mission.html">Mission</a></li>
  <li><a href="vision.html">Vision</a></li>
  <li><a href="contact-02.html">Contact Us</a></li>     
 </ul>
</div>

CSS

ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: gray;
        font-size: 17px;
    }
    li {
        float: left;
    }
    li a,
    .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover,
    .dropdown:hover .dropbtn {
        background-color: #75c5cf;
    }
    li.dropdown {
        display: inline-block;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgb3a(0, 0, 0, 0.2);
    }
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    .dropdown-content a:hover {
        background-color: #f1f1f1
    }
    .dropdown:hover .dropdown-content {
        display: block;
    }

Answer 1

试试这个。我从本地上传的品牌商品上的 hover 箭头。请检查以下代码。

/* css */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: gray;
  font-size: 17px;
}
li {
  float: left;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #75c5cf;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
  display: block;
}
.sub-mnu {
  position: absolute;
  left: 174px;
  top: 0px;
}
.dropdown-content ul {
  display: none;
}
.dropdown-content:hover ul {
  display: block;
}
.brnd {
  background-image: url(https://www.dropbox.com/s/fhjnwgbokn8i8eo/arrow.png);
  background-position: right;
  background-repeat: no-repeat;
}

<div id="navbar-collapse-grid" class="navbar-collapse collapse">
  <ul class="nav navbar-nav" id="drop-nav">

    <li><a class="active" href="index.html">Home</a>
    </li>
    <li class="dropdown">
      <a href="aboutus.html" class="dropbtn">Our Company</a>
      <div class="dropdown-content">
        <a href="#">Company Overview</a>
        <a href="#">Management</a>
        <a href="#">Manufacturing</a>
        <a href="#">Business</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="products.html" class="dropbtn">Product</a>
      <div class="dropdown-content">
        <a href="#">Our Brand</a>
        <ul class="sub-mnu">
          <li><a href="#">Intes-o</a>
          </li>
          <li><a href="#">Frig-M</a>
          </li>
          <li><a href="#">Rahat</a>
          </li>
          <li><a href="#">Zesund</a>
          </li>
          <li><a href="#">Bioti 1gm I.V</a>
          </li>
          <li><a href="#">Vomiss I.V</a>
          </li>

          Zesund
        </ul>
        <a href="#">New Brand Releases</a>
      </div>
    </li>
    <li><a href="mission.html">Mission</a>
    </li>
    <li><a href="vision.html">Vision</a>
    </li>
    <li><a href="contact-02.html">Contact Us</a>
    </li>


  </ul>
</div>