Bootstrap horizontales Menü mit der Maus über horizontale Untermenü mit gab

Question

Ich möchte Webpage Display-Menü mit Untermenüs Maus über das Display horizontal und halten Sie die Lücke und klicken Sie (ohne Änderung Hauptmenüposition). Ich habe es entwickelt, es funktioniert nicht richtig. Ich habe alle Details mit Bildschirm hinzugefügt.

Dies ist mein cshtml-Code.

<div class="container"> 
 
     <ul class="nav nav-tabs pull-right" id="myTab" role="tablist"> 
 
      <li class="active dropdown-toggle"><a role="tab" href="#one" data-toggle="tab">One</a></li> 
 
      <li><a role="tab" href="#two" data-toggle="tab">Two</a></li> 
 
      <li><a role="tab" href="#three" data-toggle="tab">Three</a></li> 
 
      <li class="dropdown" id="mysubmenu"> 
 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Testing</a> 
 
       <nav class="navbar" id="mysubmenu" role="navigation"> 
 
        <ul class="nav navbar-nav navbar-left"> 
 
          <li><a href="#">Test sub 1</a></li> 
 
          <li><a href="#">Test sub 2</a></li> 
 
          <li><a href="#">Test sub 3</a></li> 
 
          <li><a href="#">Test sub 4</a></li> 
 
         </ul> 
 
        </nav> 
 
      </li> 
 
     </ul> 
 
     </div>

Dies ist meine jQuery Klasse

<script> 
 
    $(function() { 
 
     $("#mysubmenu ul").hide(); 
 

 
     $("#mysubmenu a").mouseover(function() { 
 
      var isdropdown = $("#mysubmenu").hasClass("dropdown"); 
 
      //alert(isdropdown); 
 
      if (isdropdown) { 
 
       $("#mysubmenu ul").show(); 
 

 
       $("#mysubmenu").removeClass("dropdown"); 
 
       $("#mysubmenu").addClass("dropup"); 
 
      } else { 
 
       $("#mysubmenu ul").hide(); 
 
       $("#mysubmenu").removeClass("dropup"); 
 
       $("#mysubmenu").addClass("dropdown"); 
 
      } 
 

 
      event.preventDefault(); 
 
     }); 
 

 
     
 

 
    }) 
 
    </script>

Das ist mein CCS

.nav-tabs> li.active > a, .nav-tabs> li.active > a:hover, .submenu > .nav { 
 
    
 
}

Das ist mein heraus mit Details setzen und endgültig aus setzen

Answer 1

padding oben in den "#mysubmenu ul"

#mysubmenu ul 
    { 
    padding-top:100px; 
    }