Multilevel Dropdown Navigation bar

Question

I am trying to make a multilevel dropdown menu but only first level is showing in Desktop View . although its working fine in Mobile view but not in Desktop view why ? you can see in the residential menu the Ongrid and OffGrid Option is not visible the menu is visible only till first level i.e Residential and same this goes with Products menu

I want the menu somthing like this

    $( 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, 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>