css - css垂直メニューの横にあるサブメニューを開くにはどうすればよいですか?

Question

CSS と<ul> <li>タグを使用して垂直メニューを作成する必要があります。しかし、サブメニューを含むリンクにカーソルを置くと、他のメイン項目が別の場所に移動します。
これは私の jsfiddleです。
誰でも私を助けることができますか？

Answer 1

サブメニューを作成する代わりにposition: relative(それでもフローの一部になります) 、適切な/ / /設定を含むli position: relativeを作成します。menu_sub position: absoluteleftrighttopbottom

#menu li {
    position: relative;
}
#menu_sub {
    margin:0;
    padding:0;
    position: absolute;
    list-style:none;
    display:none;
    left: 70%;
    top: 0;
}

http://jsfiddle.net/Kc6m4/3/

Answer 2

爆発ピルの応答は機能します。これがそうであるように：

サブメニューをフローティングにすることで、通常のフローを中断することもできますが、親ULとの関係は維持されます。

http://jsfiddle.net/Kc6m4/4/

#menu li:hover ul {
    display: block;
    float: right;
    clear: none;
    position: absolute;
    top: -30px;
    left; 0;
}

次に、上、左、右などを使用して位置を調整します。上記の例では、負のtop位置を使用して親リストアイテムの高さをクリアし、ほぼ同じ位置から開始するようにしました。