dropdown menu is visible even if you don't hav

Question

I just created a button with a dropdown menu, you can view the demo here.

In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.

The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.

I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.

Here is the code I have:

HTML:

   <div class="shopping-cart-wrapper">
    <a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
     <div class="shopping-cart-dropdown">
       <div class="empty-cart"><span>Your shopping cart is empty</span></div>
     </div>
   </div>

CSS:

    .shopping-cart-wrapper:hover .shopping-cart-dropdown {
      opacity: 1;
      display: block;
    }
    .shopping-cart-wrapper {
      display: inline-block;
        background: #000;
        margin-top: 5px;
        margin-left: 15px;


    }

    .shopping-cart {

      border: 1px solid #d3d3d3;
      color: #656565;
      padding-right: 10px;
      padding-top: 8px;  padding-bottom: 8px;
      padding-left: 40px;
      font-weight: bold;
      display: inline-block;
      font-size: 13px;  
      text-align: right;
      text-decoration: none;
      box-shadow: 0px 1px 0px #f2f2f2;
      background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
      position: relative;
    }


    .shopping-cart:hover { 
      background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ; 
      color: #202020;
      border: 1px solid #c6c6c6;
      box-shadow: 0px 1px 0px #e5e5e5;
     }

    .shopping-cart-dropdown {
      opacity: 0;
      display: none;
      border: 1px solid #d3d3d3;
      padding-bottom: 80px;
      position: relative;
      right: 49px;
      width: 247px;
      background: #f6f6f6;
      font-size: 12px;
      font-weight: bold;
    }

    .empty-cart{
      background: #202020;
      padding: 10px;
      color: #fff;
      text-align: center;
      position: relative;
    }  

Answer 1

What's Going On

The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.

Current Selector:

To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.

We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.

Code

Working Example

Current:

.shopping-cart-wrapper:hover .shopping-cart-dropdown {
  opacity: 1;
  display: block;
}

Working:

.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
  opacity: 1;
  display: block;
}

Further Information

http://reference.sitepoint.com/css/adjacentsiblingselector