0

画像付きのドロップダウン メニューを作成する際に問題に直面しています。メインメニュー項目と対応する垂直メニューを含む中央揃えの水平リストを実現しようとしています。

これは私のCSSコードコードです:

#nav {
    position: relative;
    top: 88px;
    padding: 0px;
    border: 0px;
    min-width: 800px;
    z-index: 999;
    font-size: 0px;
}

#nav > ul {
    padding: 0;
}

#nav > ul > li {
    display: inline-block;
    padding: 0 0 0 0;
}

#nav >ul> li> ul {
    width: 100%;
    display: none;
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#nav> ul >li >ul> li {
    display: block;
    padding: 0px;
}

JQuery コード:

$("#nav img").mouseover(function () {
  //$('ul .subList').hide();            
  var imgSrc = $(this).attr("src");
  var tempSrc = imgSrc.split(".png");
  var newSrc = tempSrc[0] + "Hover.png";
  $(this).attr("src", newSrc);
  $(this).closest('li').children('ul .subList').slideToggle();
});

nav は、リストを含む div です。リスト項目はすべて画像です。

メインメニュー項目を整列させ、サブメニュー項目を対応するメニューの下に表示したいのですが、メインメニュー項目が上に移動しています。

例えば：

あるべき: (望ましい)

アイテム1 アイテム2 サブ1a サブ1b

(電流出力)

アイテム1 サブ1a サブ1b アイテム2

4

1 に答える 1

1

ああ、驚くほど簡単に修正できます。これは、CSS で発生するこれらの奇妙なデフォルトの動作の 1 つです。

あなたに#NAV > UL > LI

追加：vertical-align: top

逆の効果を望まない限り、常に vertical-align: top を inline-block 要素に追加する必要があります :-)

于 2012-09-01T08:27:32.567 に答える