0

ここに私が作ったフィドルがあります：http://jsfiddle.net/8ML3u/

この種のドロップダウン メニュー ( ) をシミュレートする必要#topnavがありました。ここでは、上部のメニュー要素が配置されている場所で下部の境界線がマージされます。私はこのソリューションを思いつきましたが、柔軟性が十分ではなく、さまざまなブラウザーで故障し、IE8 ではまったく機能しません。他にどうやってこの種のメニューを作ることができるかについて、私は非常に混乱しています。私に何ができる？

これが私が作ろうとしているものです: http://i39.tinypic.com/2zghfnt.png

編集: 申し訳ありませんが、十分に明確にしていない可能性がありますが、メニューは完全に透明であり、その背後にある背景は静的ではありません。

4

2 に答える 2

2

私はこのフィドルを編集します: http://jsfiddle.net/8ML3u/1/

今、あなたは見ることができます。そうですか？

于 2013-07-13T07:32:28.877 に答える
1

これが私の解決策です。私はあなたが持っていたものと同様のアプローチを使用しました。要素を動的に追加して、欠落している境界線部分を表示し、ほとんどのスタイルをすでにCSSに入れ、幅を計算するだけで簡単にしました:

Javascript

$(document).ready(function () {
    $('#topnav > li').hover(function () {
        if ($(this).children('ul').length > 0) {
            var submenu = $(this).find('ul:first');
            var border = $('<div class="border">').css('width', submenu.width() - $(this).width() + 'px');
            submenu.before(border);
            $(this).css('border-bottom','transparent');
        }
    }, function () {
        $(this).find('.border').remove();
    });
});

CSS

.border {
    height: 1px;
    border-bottom: 1px grey solid;
    position: absolute;
    left: 100%;
    bottom: -1px;
}

フィドルの例

于 2013-07-13T17:15:43.033 に答える