带箭头的CSS下拉菜单

Question

I am trying to create a drop-down menu that should have 2 levels of dropdown. I want the a menu item (Product), when I hover over its sub-menu(Our Brands) it should come with an arrow and drop-down to side.

Demo :- 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

Try this. The hover arrow on the brand item I have uploaded from the local. Please check the below code.

 /* 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 IV</a> </li> <li><a href="#">Vomiss IV</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>