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

结帐按钮和下拉菜单之间有 3px 的间隙。因此，在将光标从结帐移动到下拉菜单时，下拉菜单会消失。所以，我减少了列表中 3px 的上边距。

ul#checkout li a{ }选择器选择列表中的所有锚标记。但是，我们必须只选择第一个锚标记。所以，我们可以使用ul#checkout > li > a { }选择器。

更新的小提琴

于 2013-10-09T13:50:34.270 回答