html - CSS shopping cart Dropdown menu -

I'm having difficulty explaining a piece of code.

I am trying to look like my menu like this

But if I try to select a menu item if my hover, then the mouse is dropped down on the checkout button if I create an href The checkout button turns into a style.

Second, the My Dropdown Menu does not extend the full size, it stays in line with the checkout button.

My code

  & lt; Div id = "cart" & gt; & Lt; Div id = "carttext" & gt; Your cart has 2 items & lt; / Div & gt; & Lt; Ul id = "checkout" & gt; & Lt; Li & gt; & Lt; A href = # & gt; Go to Checkout & lt; / A & gt; & Lt; Ul id = itemList & gt; & Lt; Li & gt; & Lt; Img style = "float: left; padding-right: 10px" src = "image / item 1.jpg" width = "64" height = "64" alt = "item1" /> Broadband Android & lt; Br / & gt; 99: - & lt; Br / & gt; Read more & lt; / Li & gt; & Lt; Li & gt; & Lt; Img style = "float: left; padding-right: 10px" src = "image / item 1.jpg" width = "64" height = "64" alt = "item1" /> Dialer seat emit & lt; Br / & gt; 99: - & lt; Br / & gt; Read more & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
:   
 
 
 There was a 3px difference between the checkout button and Dropdown Menu Therefore, while moving the cursor from checkout to the dropdown menu, the dropdown menu disappears. Therefore, I have reduced the 3px top margin in the list.  
  ul # checkout li a {}  selector selects all anchor tags inside the list. However, we only have to select the first anchor tag. Therefore, we can see the  ul # checkout & gt; You can use. Le & gt; A {} selector.