3

私は次の構造を持っています：

<div class="wrap">
    <div class="menu">
        <div class="item">
            Menu
            <div class="submenu">
                <div class="submenuitem">Submenu</div>
            </div>
        </div>
    </div>
</div>

これまでのところ、次の CSS:

div.wrap {
    background: #eee;
    height: 80px;
}

div.menu {
    margin-left: 50px;
    background: #36e;
}

div.item {
    background: #d00;
    color: #fff;
    line-height: 40px;
    padding: 0px 20px;
    font-size: 16px;
    display: inline-block;
    margin-left: 50px;
}

div.item:hover {
    background: #b00;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0%;
    top: 50%;
    min-width: 300px;
}

div.item:hover div.submenu {
    display: inline-block;
}

div.submenuitem {
    line-height: 40px;
    padding: 0px 20px;
    background: #b00;
    color: #fff;
    display: inline-block;
}

JSFiddle

私が求めている動作はsubmenuitem、テキスト コンテンツに合わせて の幅が拡張されますが、最大でも の幅wrapを拡張に使用できるということです。itemまた、 の幅が のsubmenuitem元の位置から の右端までの距離よりも大きくならない限り、真下に配置する必要がありますwrap。その後、 の左端に達するまで左に拡張する必要がありwrapます。

このように をオンにして の元の位置から の右端までの距離がわかれば完璧に成功するのsubmenuitemですwrapが、その距離を知らなくても済むようにしたいのです。right: 0%; min-width: 300px;submenuitem

私は過去数日間、これに対する解決策を作成または見つけようとしてきましたが、これ以上近づくことができませんでした. そもそも純粋なCSSでも可能ですか?

4

1 に答える 1

0

これはあなたが欲しいものですか？これをチェックして、私に知らせてください。

http://jsfiddle.net/zmcEC/9/

div.wrap {
    width: 400px;
    background: #eee;
    position: relative;
    height: 80px;
}

div.submenu {
    display: none;
    background: #0b0;
    height: 40px;
    position: absolute;
    right: 0;
    top: 40px;
    left:0;
}
于 2013-04-24T17:03:59.470 に答える