Wie kann man das letzte Element der zweiten Menüebene ablegen?

Question

Ich habe das schon seit fast 3 Wochen versucht, ist aber noch nicht gelungen. Ich brauche Hilfe bei der Feinabstimmung meines Dropdown-Menüs. Ich werde mein Bestes versuchen, damit Sie verstehen, wonach ich suche.

Ich habe ein horizontales Menü auf meinem Blog und die Elemente der zweiten und dritten Ebene Dropdown-Liste. Gibt es irgendeinen Weg, wie ich das letzte Element und seine Level-Elemente dazu bringen kann, nach unten zu fallen anstatt herunterzufallen? Ich meine, schau dir die vierte Kategorie auf meiner Speisekarte an - AKTUELLE ANGELEGENHEITEN. Beim Maus-Hover ist das zweite Element SPORTS. Wieder mit der Maus über SPORTS, Cricket, Tennis, Badminton usw. schweben nach rechts und Drop-Down. Was ich wünsche ist, SPORTS am unteren Rand der Liste CURRENT AFFAIRS (und nicht an zweiter Stelle auf der Liste), und seine Elemente - Cricket, Tennis, Badminton etc zunächst schwimmen (wie sie derzeit tun), aber dann zu fallen , anstatt herunterzufallen.

Ein Beispiel für das, was ich versuche zu erreichen, ist dieses - http://www.cssplay.co.uk/menus/final_pullup.html Wenn wir über DEMOS schweben, dann auf ACTIVE FOCUS, fliegen die Elemente nach rechts und dann fallen. Ich wünsche mir das Gleiche. Ich habe nicht die Absicht, ein vollständiges Drop-Up-Menü zu haben, stattdessen möchte ich nur das letzte, untere Element in der Liste nach rechts fliegen und dann seine Level-Elemente fallen lassen, wie es bei ACTIVE FOCUS-Elementen passiert. Kann mir jemand helfen, das zu erreichen?

Dies ist die aktuelle CSS des Menüs -

/* Horizontal Menu */ 
 
#menutop ul,#menutop li,#menutop span,#menutop a {margin:0;padding:0; 
 
position:relative;} 
 
#menutop {height:49px;background:#1a1b1f;width:auto;position: relative;} 
 
#menutop:after,#menutop ul:after {content:'';display:block;clear:both;} 
 
#menutop a {background:#1a1b1f;color:#e0d4d4;display:inline-block;font-family:'Oswald';font-size:15px;font-weight:300;line-height:49px;padding:0 20px;text-decoration:none;transition:all 0.3s ease;} 
 
#menutop ul {list-style:none;} 
 
#menutop > ul,#menutop > ul > li {float:left;} 
 
#menutop > ul > li > a {color:#e0d4d4;font-size:15px;} 
 
#menutop > ul > li.active > a {background:1a1b1f;color:#e0d4d4;} 
 
#menutop > ul > li:hover > a {background:#2f82c3;color:#fff;} 
 
#menutop .menu-sub {z-index:1;} 
 
#menutop .menu-sub:hover > ul {display:block;} 
 
#menutop .menu-sub ul {display:none;position:absolute;width:170px;top:100%;left:0;box-shadow:0 1px 3px 0 rgba(0,0,0,0.3);border-radius:2px;} 
 
#menutop .menu-sub ul li {margin-bottom:0px;} 
 
#menutop .menu-sub ul li a {background:#236ea8;font-size:15px;display:block;line-height:120%;padding:10px;color:#f6f6f6;transition:all 0.3s ease;} 
 
#menutop .menu-sub ul li:hover a {background:#459bb6;color:#fff;} 
 
#menutop .menu-sub .menu-sub:hover > ul {display:block;} 
 
#menutop .menu-sub .menu-sub ul {display:none;position:absolute;left:100%;top:0;} 
 
#menutop .menu-sub .menu-sub ul li a {background:#459bb6;color:#fff;transition:all 0.8s ease-in-out;} 
 
#menutop .menu-sub .menu-sub ul li a:hover {background:#3d8ba4;color:#fff;}

Answer 1

Ich bearbeite meine Antwort für Ihre genaue Problem ...

hier gehen Sie ..

#menutop .menu-sub ul li a{ 
position: relative; 

} 

#menutop .menu-sub .menu-sub ul{ 
position: absolute; 
top: -75px; 
} 

Dies sollte gut funktionieren Versuchen. . .

Answer 2

Das von der Website ist Sie Änderungen an makee zu.

Jetzt Diese

#menutop { 
    height: 49px; 
    background: #1a1b1f; 
    width: auto; 
    position: relative; 
} 

.menu ul ul { 
    visibility: hidden; 
    position: absolute; 
    bottom: 30px; 
    left: 0; 
    width: 150px; 
}