1

以下にフィドルを作成しました。最初のドロップダウンメニューは、フレキシブルボックスレイアウトを使用しています。フロートで構成されている下の2番目のメニューを置き換えようとしていました。

Afaikフローティングコンテンツは、通常の「フロー」からそれを引き出します。そのため、フロートされた例の方が見栄えが良くなります。私の目標は、柔軟なボックスレイアウトを使用して、フロートナビゲーションに似たものを実現することです。メニューにカーソルを合わせたときにコンテンツが押し下げられたくない。浮いた例のように重ねて欲しいです。肝心なのは、ホバーされたメニューの高さ全体を含むようにFlexコンテナを拡張したくないということだと思います。

どうすればこれを達成できますか？これに関するご意見ありがとうございます。

http://jsfiddle.net/hRKgV/

Webkit構文を追加しただけですが、フィドルはすべての主要なブラウザーで機能するようです（フィドルがどのように機能するかによると思われます）。

それが他の誰か（私は疑わしい）を助けるなら、これを追加することによってほとんど達成することができます：

#flexmenu ul{    
float:left;
width:100%;
}

#content{
clear:both;
}

もちろん、この新しいモデルを試してみる理由は、他の回避策を使用する必要がないためです。これが私が達成したいことを理解するのに役立つことを願っています。

4

1 に答える 1

0

完全に理解しているかどうかはわかりませんが、推測してみましょう。プッシュせずにコンテンツをオーバーラップするメニュー? ID ではなくクラスを使用する必要があります。このようなもの: JSFiddle の例

#content, #content2 {
background-color:#AABBCC;
    clear:both;
}

.floatedmenu {
    float:left;
    margin:0;
    padding:0;
    width:100%;
    position:relative;
}

.floatedmenu ul {
    clear:left;
    margin:0;
    padding:0;
    float:right;
    position:relative;
    right:50%;
}

.floatedmenu ul li {
    text-align:center;
    float:left;
    position:relative;
    left:50%;
}

.floatedmenu ul ul {
    display:none;
    position:absolute;
    right:auto;
}

.floatedmenu ul li:hover ul{
display:block;
    z-index: 2;
    background-color: #FFF;
}

.floatedmenu ul ul li {
    left:auto;
    margin:0;
    clear:left;
    width:100%;
}

.floatedmenu ul li a {
    display:block;
    margin: 2px;
    z-index: 2;
}
​
于 2012-12-13T11:10:26.813 に答える