多级下拉导航栏

问题描述

我正在尝试创建一个多级下拉菜单，但是 Desktop View 中仅显示第一级。 虽然在Mobile视图中可以正常工作，但在Desktop视图中却不能，为什么？ 您可以在住宅菜单中看到Ongrid and OffGrid选项不可见，该菜单仅在第一层即住宅之前可见，这与产品菜单

相同

我想要这样的菜单

    $( document ).ready(function() {

      // Detect device type
      var isMobile;
      if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
          isMobile = true;
      } else {
          isMobile = false;
      }

      if (isMobile) {

        // Navigation - Dropdown menu on mobile
        $('.main-menu > li > a').on('click',function(e) {
          if ($(this).parent().children('ul').length) {
            e.preventDefault();
          }
          $(this).parent().find('i').toggleClass('open');
          $(this).parent().find('ul').toggle();
        });

        // Navigation - show & close menu on mobile
        $('.btn-nav-mobile').on('click',function() {
          $(this).addClass('btn-nav-open');
          $('.nav').addClass('nav-open');
          $('.overlay').addClass('overlay-open');
        });
        $('.overlay').on('click',function() {
          $(this).removeClass('overlay-open');
          $('.nav').removeClass('nav-open');
          $('.btn-nav-mobile').removeClass('btn-nav-open');
        });

      }


      
    });

    .nav {
      margin-left: auto;
    }

    @media (max-width: 992px) {
      .nav {
        overflow: auto;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100%;
        background-color: #fff;
        z-index: 100;
        transition: all 0.2s;
      }
      .nav.nav-open {
        visibility: visible;
        opacity: 1;
        left: 0;
      }
    }

    .nav .main-menu > li {
      position: relative;
      display: inline-block;
      line-height: 0px;
      margin-left: 30px;
      vertical-align: center;
    }
    .nav .main-menu > li:hover{
      color: #3BA2FF;
    }  
    .nav .main-menu .active {
      color:#3ba2ff
    }


    .header-2 .nav .main-menu > li {
      line-height: 75px;
    }

    @media (max-width: 992px) {
      .nav .main-menu > li {
        display: block;
        line-height: 1 !important;
        margin-left: 0;
        border-bottom: 1px solid #EFEFEF;
      }
      .nav .main-menu > li a {
        display: block;
        padding: 15px 20px;  
      }
    }

    .nav .main-menu > li i {
      display: none;
      position: absolute;
      top: 15px;
      right: 20px;
      transition: all 0.2s; 
    } 


    .nav .main-menu > li i.open {
      transform: rotate(90deg);
      transition: all 0.2s;
    }

    @media (max-width: 992px) {
      .nav .main-menu > li i {
        display: block;
      }
    }

    /* .nav .main-menu > li:after {
      visibility: hidden;
      content: '';
      position: absolute;
      top: 50px;
      left: 25%;
      transform: translateX(-50%);
      display: inline-block;
      width: 0;
      height: 4px;
      border-radius: 5px;
      background-color: #3BA2FF;
      transition: all 0.2s;

    }  */


    .green .nav .main-menu > li:after {
      background-color: #3AE374;
    }

    .lightblue .nav .main-menu > li:after {
      background-color: #3BA2FF;
    }

    .red .nav .main-menu > li:after {
      background-color: #ff4d4d;
    }

    .no-radius .nav .main-menu > li:after {
      border-radius: 0;
    }

    @media (max-width: 992px) {
      .nav .main-menu > li:after {
        top: 35px;
        left: 5px;
        transform: none;
      }
    }

    /* .nav .main-menu > li.active:after{
      visibility: visible;
      width: 50px;
      transition: all 0.3s;

    } */


    .nav .main-menu > li:hover ul {
      opacity: 1;
      visibility: visible;
      transform: translateY(5px);
      transition: all 0.2s;
    }
    .nav .main-menu > li ul {
      opacity: 0;
      visibility: hidden;
      overflow: hidden;
      transform: translateY(15px);
      width: 200px;
      left: -10px;
      top: 100%;
      background-color: #fff;
      position: absolute;
      z-index: 20;
      border-radius: 5px;
      box-shadow: 0 3px 10px 0 rgba(0,0.1);
      transition: all 0.2s;
    }

    .no-radius .nav .main-menu > li ul {
      border-radius: 0;
    }

    @media (max-width: 992px) {
      .nav .main-menu > li ul {
        position: relative;
        display: none;
        width: 100%;
        left: 0;
        visibility: visible;
        opacity: 1;
        transform: translateX(0) !important;
        box-shadow: none;
      }
    }

    .nav .main-menu > li ul li {
      display: block;
      margin-left: 0;
      line-height: 19px;
      border-bottom: 1px solid #EFEFEF;
    }

    @media (max-width: 992px) {
      .nav .main-menu > li ul li {
        font-size: 12px;
        padding-left: 10px;
        border-bottom: none;
        border-top: 1px solid #EFEFEF;
      }
    }

    .nav .main-menu > li ul li a {
      display: block;
      padding: 13px 15px;
      color: #8c8c8c;
      transition: all 0.2s;
    }

    .nav .main-menu > li ul li a:hover {
      color: #333333;
      transition: all 0.2s;
      transform: translateX(5px);
    }

    .btn-nav-mobile {
      width: 25px;
      display: none;
      cursor: pointer;
    }
    #get{
      margin-left: -20px;
    }
    @media (max-width: 992px) {
      .btn-nav-mobile {
        display: block;
        margin-left:-10px;
        margin-bottom:20px
      }
      #get{
        display:none;
      }
    }

    .btn-nav-mobile span {
      display: block;
      width: 25px;
      float: right;
      height: 3px;
      margin-bottom: 5px;
      border-radius: 5px;
      background-color: #7b80eb;
    }

    .no-radius .btn-nav-mobile span {
      border-radius: 0;
    }


    .btn-nav-mobile span:last-child {
      margin-bottom: 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <header class="header" >
    <div class="main-bar" id="mainb">
      <div class="container d-flex justify-content-between align-items-center">
      <div class="btn-nav-mobile">
        <span></span>
        <span></span>
        <span></span>
      </div>
        <div class="solar_logo">
          <a href="index.html"><img src="images/logo2.png" alt="solar-installation-logo"></a>
        </div>

      <nav class="nav">
       <ul class="main-menu">
       <li>
         <a href="index.html" style="margin-left:-15px;font-weight: 600" >Home</a>
       </li>
       <li>
       <a href="about.html" style="margin-left:-15px;font-weight: 600">About Us</a>
     </li>
     <li>
      <a href="service.html"style="font-weight: 600;margin-left:-15px;">Services</a>
      <ul>
      <li><a href="service.html">Residential</a>
        <ul id="drop">
          <li><a href="service.html#ongrid">On Grid Solar Power Plant</a></li>
          <li><a href="service.html#offgrid">Off Grid Solar Power Plant</a></li>
        </ul>
      </li>
      <li><a href="commercial.html">Commercial</a></li>
      <li><a href="projects.html">Projects</a></li>
      </ul>
    </li>
     <li>
       <a href="Products.html"style="font-weight: 600;margin-left:-15px;">Solar Products</a>
      <ul>
        <li><a href="service.html#residential">Solar Modules</a></li>
        <li><a href="service.html#residential">Solar Inverter</a></li>
        <li><a href="service.html#commercial">Solar Batteries</a></li>
        <li><a href="service.html#institutional">BOS Systems</a></li>
        <li><a href="service.html#institutional">Solar Pumps</a></li>
        <li><a href="service.html#institutional">Solar Street Light</a></li>
        </ul>
     </li>
     <li>
     <a href="carrer.html" style="font-weight: 600;margin-left:-15px;" >Electric Vehicles</a>
     <ul>
      <li><a href="service.html#residential">Electric Vehicles</a></li>
      <li><a href="service.html#residential">Electric Vehicles Batteries</a></li>
      </ul>
     </li>
      <li><a href="contact.html"style="font-weight: 600;margin-left:-15px;">Contact Us</a></li>
      <li class="solar_mdl_btn"> 
      <a href="#exampleModal" class="solar_btn" id="get" data-toggle="modal">Get A Quote</a>
      </li>

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

    <div class="overlay"></div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）