Pure CSS Menu Reaction to Hover

HTML

<div id="menuwrapper">
    <ul>
        <li><a href="#">My awesome button</a></li>
        <li><a href="#">My awesome button</a>
            <ul>
                <li><a href="#">awesome link nº 1</a></li>
                <li><a href="#">awesome link nº 2</a></li>
                <li><a href="#">awesome link nº 3</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

* Define the body style */
body {
    font-family:Arial;
    font-size:12px;
}
 
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}


/* We float the li list to the left and apply background color and border right white and set the height to 25px. Note you can ignore the height if you do not want
*/
#menuwrapper ul li{
    float:left;
    background-color:#7f95db;
    border-right:solid 1px white;
    height:25px;
    line-height:25px;
}

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{
    background-color:#6679e9;
    position:relative;
}



/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}


 
/* When user has hovered the li item, we show the ul list by applying display:block, note: 25px is the menu height.  */
#menuwrapper ul li:hover ul{
    left:0;
    top:25px;
    display:block;
}