Hover Acordian Menu

by Adam Howard

HTML

<div class="menu" style="-webkit-border-radius: 10px 10px 0 0;">Home</div>
<div class="menu">About</div>
<div class="menu" style="-webkit-border-radius: 0 0 10px 10px;">Contact</div>

CSS

.menu {
    width: 250px; height: 50px;
    background-color: #3BA6ED;
    display: block;
    border: 5px solid white;
    margin: auto; padding: auto;
    text-align: center; line-height: 45px;
    font-size: 40px; font-family: Sans-Serif;
    color: white;
    font-weight: lighter;
    
    -webkit-transition: 0.6s ease;
}

.menu:hover {
    height: 300px;
    background-color: black;

}