How to make <details> drop down on mouse hover

can anybody help me on how to make the details dropdown on mouse hover using css

This is the html code

<details>
  <summary>Sample</summary>

Details of sample
</details>

I need a css code for it to drop down when the mouse hovers on it can anybody help me on this?

Try this:

HTML:

<div id="summary">Sample</div>
<div id="detail">Detail of theis summary</div>

CSS:

#summary {
    background: #666;
    width: 100px;
    color: #fff;
}

#summary:hover {
    cursor: pointer;
    color: #fff200;
}

#detail {
    width: 300px;
    height: 300px;
    background: #fff200;
    display: none;
}

JavaScript:

$(document).ready( function() {
    $('#summary').hover( function() {
        $('#detail').toggle();
    });
});

See my jsfidle here