CSS购物车下拉菜单

Question

我正在努力学习一段代码。

我试图让我的菜单看起来像这样

但如果我将鼠标悬停在结帐按钮上，如果我尝试选择菜单项，则下拉消失。如果我创建一个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：

Answer 1

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

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

Updated fiddle