Navbar zweites Untermenü nicht richtig positioniert

Question

Diese Frage basiert auf einem Thread hier auf SO Here Dies funktioniert alles in Ordnung, es sei denn, die 2. Ebene Element ist nicht oben. Im Beispiel ist der Eintrag mit dem Menü der 2. Ebene der erste Eintrag. Wenn Sie den Gegenstand um ein oder zwei Felder nach unten bewegen, öffnet sich die zweite Ebene ganz oben.

Die CSS, sieht gut aus, vielleicht auch ich dachte, es mit Bootstrap-Version in dem einem Demo Link im Thread

.sidebar-nav { 
    padding: 9px 0; 
} 

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    visibility: hidden; 
    margin-top: -1px; 
} 

.dropdown-menu li:hover .sub-menu { 
    visibility: visible; 
} 

.dropdown:hover .dropdown-menu { 
    display: block; 
} 

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { 
    margin-top: 0; 
} 

.navbar .sub-menu:before { 
    border-bottom: 7px solid transparent; 
    border-left: none; 
    border-right: 7px solid rgba(0, 0, 0, 0.2); 
    border-top: 7px solid transparent; 
    left: -7px; 
    top: 10px; 
} 
.navbar .sub-menu:after { 
    border-top: 6px solid transparent; 
    border-left: none; 
    border-right: 6px solid #fff; 
    border-bottom: 6px solid transparent; 
    left: 10px; 
    top: 11px; 
    left: -6px; 
} 

(Fiddle) zu tun hatte.

Um dieses Problem zu beseitigen, habe ich es in der Sandbox von Fiddle verschoben und habe das gleiche Problem, so scheint es nicht mit meinem Code oder Bootstrap-Version. Ich bin nicht daran gebunden, es auf diese Weise zu tun, ich bin völlig offen dafür, etwas anderes zu verwenden, solange ich das Menü der 2. Ebene haben kann, und ich öffne es auf den Bildschirmen in voller Größe.

Danke,

Dave

Answer 1

AKTUALISIERT

Habe ich nur noch

.dropdown-menu .sub-menu{ 
    top: auto !important; 
    margin-top:-30px !important; 
} 

und es scheint gut zu funktionieren, überprüfen Sie bitte, ob das ist, was Sie wollen.

Hier ist fiddle