メニューの第2レベルの最後の要素をドロップする方法

Question

私はこれをほぼ3週間試していますが、まだ成功していません。私はちょっとしたメニューを微調整するのに助けが必要です。私はあなたが私が探しているものを理解できるように最善を尽くします。

ブログに横のメニューがあり、2番目と3番目の要素がドロップダウンしています。最後の要素とそのレベル要素をドロップダウンするのではなくドロップする方法はありますか？つまり、私のメニューの4番目のカテゴリ - 現役を見てください。マウスを動かすと、2番目の要素はSPORTSです。 再びスポーツにマウスを乗せて、クリケット、テニス、バドミントンなどを右に浮かべてドロップダウンします。 私が欲しいのは、CURRENT AFFAIRSのリストの下に（そして2番目のリストではなく）スポーツを維持することと、その要素 - クリケット、テニス、バドミントンなどが最初にフロートして（現在のように） 、ドロップダウンの代わりに。

これは私が達成しようとしている例です - http://www.cssplay.co.uk/menus/final_pullup.html DEMOSの上にマウスカーソルを置くと、ACTIVE FOCUSで要素が右に飛び出してからドロップダウンします。私は同じことを望んでいる。 完全にドロップダウンメニューを表示するつもりはなく、リストの最後の一番下の要素だけを右に飛ばしてから、ACTIVE FOCUS要素のようにそのレベル要素をドロップします。 誰かがそれを実現する方法を教えてもらえますか？

これは、メニューの現在のCSSである - これはあなたが変更をmakeeするサイトからです

/* 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

試してみてください。 。 。

Answer 2

。

は今

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

} 

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

これは正常に動作する必要があります..私はここに

あなたが行く...あなたの正確な問題のために私の前の答えを編集しています。この

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

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