在导航栏中添加子菜单

Question

如何通过CSS直接切换子菜单：

如果您在我们悬停子菜单时查看导航，我想在导航中添加一个子菜单并向右移动，它将出现在子菜单中但不在子菜单中

<nav class="main-menu navbar-main-slide">
   <ul class="nav navbar-nav navbar-main">
      <li><a href="index.html">HOME</a></li>
      <li class="dropdown">
         <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="about.html">COMPANY <i class="fa fa-angle-down"></i></a>
         <ul class="dropdown-menu">
            <li><a href="#">Who are We?</a></li>
            <li><a href="#">What we stand for?</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Management</a></li>
            <li><a href="#">Main Services</a></li>
            <li><a href="#">Consulting services &amp; Lab</a></li>
            <li><a href="#">Events &amp; Tradeshows</a></li>
         </ul>
      </li>
      <li class="dropdown">
         <a href="#" data-toggle="dropdown" class="dropdown-toggle border-hover-color1">Advanced Packaging <i class="fa fa-angle-down"></i></a>
         <ul class="dropdown-menu">
            <li class="dropdown-submenu">
               <a  href="#" data-toggle="dropdown" class="dropdown-toggle border-hover-color1">Rust Prevention at its Best <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-toggle dropdown-menu">
                  <li><a href="#">VCI films &amp; Bags</a></li>
                  <li><a href="#">VCI paper </a></li>
                  <li><a href="#">Inbox Desiccants</a></li>
                  <li><a href="#">Propadry container Desiccant</a></li>
                  <li><a href="#">Vacuum Barrier Bags</a></li>
                  <li><a href="#">Rust Preventive Oil</a></li>
                  <li><a href="#">Cleaning Media &amp; Solutions</a></li>
                  <li><a href="#">VCI emitters</a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle border-hover-color1">Advanced Rust Removal <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-menu">
                  <li><a href="#">Neutral Rust Remover</a></li>
                  <li><a href="#">Acidic Rust Remover</a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a href="#" data-toggle="dropdown" class="dropdown-toggle border-hover-color1">Technology Driven Cleaners <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-toggle dropdown-menu">
                  <li><a href="#">Aqueous cleaners for Ferrous Metals</a></li>
                  <li><a href="#">Aqueous cleaners for Universal Metals</a></li>
                  <li><a href="#">Solvent cleaners for Universal Metals</a></li>
               </ul>
            </li>
         </ul>
      </li>
      <li class="dropdown">
         <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="#">Industry Centric Packaging <i class="fa fa-angle-down"></i></a>
         <ul class="dropdown-toggle dropdown-menu">
            <li class="dropdown-submenu">
               <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="#">Accessories <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-menu">
                  <li><a href="#">Tapes </a></li>
                  <li><a href="#">Strapping Solutions </a></li>
                  <li><a href="#">Sealing &amp; Wrapping Machines</a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="#">Carefully Designed Inner packaging <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-toggle dropdown-menu">
                  <li><a href="#">AIR pad</a></li>
                  <li><a href="#">Bubble wrap</a></li>
                  <li><a href="#">LDPE Bags (Stretch Film &amp; Shrink Film)</a></li>
                  <li><a href="#">Moulded Pulp packaging</a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="#">Power Packed Load Securing <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-toggle dropdown-menu">
                  <li><a href="#">Dunn age Bags</a></li>
                  <li><a href="#">Lashing Belts &amp; Buckles </a></li>
                  <li><a href="#">Shock absorber void guards</a></li>
                  <li><a href="#">Shock, Tilt &amp; Humidity indicators </a></li>
               </ul>
            </li>
            <li class="dropdown-submenu">
               <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="#">Outer Packaging <i class="fa fa-angle-right"></i></a>
               <ul class="dropdown-toggle dropdown-menu">
                  <li><a href="#">Honey Comb Boxes</a></li>
                  <li><a href="#">Corrugated Plastic Boxes</a></li>
                  <li><a href="#">Corrugated Paper Boxes</a></li>
                  <li><a href="#">Angle Board &amp; Protector</a></li>
                  <li><a href="#">Wooden &amp; Plywood Boxes</a></li>
                  <li><a href="#">Wooden ,Plywood &amp; Paper pallets</a></li>
                  <li><a href="#">SLIP SHEETS</a></li>
               </ul>
            </li>
            <li><a href="#">Heavy Machine Packaging</a></li>
            <li><a href="#">Contract Packaging</a></li>
         </ul>
      </li>
      <li class="dropdown">
         <a data-toggle="dropdown" class="dropdown-toggle border-hover-color1" href="about.html">News &amp; Media <i class="fa fa-angle-down"></i></a>
         <ul class="dropdown-menu">
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Packaging Facts</a></li>
            <li><a href="#">Packaging Tips</a></li>
            <li><a href="#">Events &amp; Tradeshows</a></li>
            <li><a href="blog.html">Blogs</a></li>
         </ul>
      </li>
      <li><a href="contact.html">CONTACT US</a></li>
      <li><a class="btn_header_search" href="#"><i class="fa fa-search"></i></a></li>
   </ul>
   <div class="search-form-modal transition">
      <form class="navbar-form header_search_form">
         <i class="fa fa-times search-form_close"></i>
         <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
         </div>
         <button type="submit" class="btn btn_search customBgColor">Search</button>
      </form>
   </div>
</nav>