CSS shopping cart Dropdown menu

Question

I'm struggling wit a piece of code.

Im trying to make my menu look like this

but if I hover my mouse over the checkout button the drop down dissapears if I try to select a menu item. if i create a href it changes to the checkout button styling.

Secondly my dropdown menu wont extend to be the whole size, it stays in line with the checkout button.

My code 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

There was a 3px gap between the checkout button and the dropdown menu. So, while moving the cursor from checkout to the dropdown menu, Dropdown menu disappears. So, I have reduced the 3px top margin in the list.

ul#checkout li a{ } selector selects all the anchor tag inside the list. But, we have to select only the first anchor tag. So, we can use ul#checkout > li > a { } selector.

Updated fiddle