I am doing this for a site I am working on. Unfortunately, I have had to do this through a static block...but it seemed to work without any issues. This is working for me, have a play and see how you go.
The CSS is pretty simple and is they key to showing and hiding the drop down itself.
CSS
// this is the panel where the cart is displayed
DIV#cart-panel {
width:100px; //arbitary width
position:absolute; // need this so that it doesn't interfere with the layout
display:none; // hides the block
z-index:200; // makes it way it in front of other content
}
#cartBtn:hover #cart-panel { display: block; } // basically, when you hover over the cartBtn, the cart-panel displays
Static Block contains
<li id="myCartBtn">
<a href="{{store url=checkout/cart}}" rel="cart">My Cart</a>
{{block type="checkout/cart_sidebar" template="checkout/cart/sidebar.phtml"}}
</li>
Then in my sidebar.phtml, I just make sure there is a div with id="cart-panel" in it, surrounding the cart itself, instead of the <div class="block block-cart">
<?php if ($this->getIsNeedToDisplaySideBar()): ?>
<div id="cart-panel">
...
</div>
<?php endif; ?>
Then, finally, I put the static block into the template where I need it