2

私はコードの一部に苦労しています。

私は私のメニューをこのように見せようとしています

欲しいもののイメージ

しかし、マウスをチェックアウト ボタンの上に置くと、メニュー項目を選択しようとするとドロップダウンが消えます。href を作成すると、チェックアウト ボタンのスタイルに変わります。

第二に、私のドロップダウンメニューは全体のサイズに拡張されず、チェックアウトボタンに沿ったままです.

私のコードhttp://jsfiddle.net/vaaljan/TNftc/

<div id="cart">
        <div id="cartText">You have 2 items in cart</div>
      <ul id="checkout">
        <li><a href=#>Go to checkout</a>
            <ul id=itemList>
                <li>
                <img style="float:left; padding-right:10px" src="images/item1.jpg" width="64" height="64" alt="Item1" /> 
                Lorem ipsum dolor<br />
                99:-<br />
                Read More</li>
                <li>
                <img style="float:left; padding-right:10px" src="images/item1.jpg" width="64" height="64" alt="Item1" /> 
                Dolor sit amet<br />
                99:-<br />
                Read More</li>
                </ul>
      </ul>
    </div></div>

1 :

4

1 に答える 1

2

チェックアウト ボタンとドロップダウン メニューの間に 3 ピクセルのギャップがありました。そのため、チェックアウトからドロップダウン メニューにカーソルを移動すると、ドロップダウン メニューが消えます。そのため、リストの上部マージンを 3px 減らしました。

ul#checkout li a{ }セレクターは、リスト内のすべてのアンカー タグを選択します。ただし、最初のアンカー タグのみを選択する必要があります。したがって、ul#checkout > li > a { }セレクターを使用できます。

更新されたフィドル

于 2013-10-09T13:50:34.270 に答える