Вот так:
<section class="mainmenu">
<div class="menu">
<a href="#"><h3>Меню</h3></a>
<div class="submenu">
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
</div>
</div>
<div class="menu">
<a href="#"><h3>Меню</h3></a>
<div class="submenu">
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
<a href="#"><p>Субменю</p></a>
</div>
</div>
</section>
*{
padding: 0;
margin: 0;
}
body{
background: white;
padding-top: 50px;
padding-left: 200px;
font-family: 'Montserrat Alternates', sans-serif;
}
.mainmenu .menu .submenu{
display: none;
}
.mainmenu .menu:hover .submenu{
border-top: 2px solid #E5E2E2;
background: gray;
display: block;
}
.mainmenu .menu:hover .submenu a:hover{
color: #FFF
}
.menu a{
text-decoration: none;
color: #E5E2E2;
}
.mainmenu .menu{
border: 2px solid #B18552;
width: 300px;
overflow: hidden;
text-align: center;
background: blue;
}
.mainmenu div:first-child{
border-radius: 30px 30px 0 0;
}
.mainmenu div:last-child{
border-radius: 0 0 30px 30px;
}
.mainmenu h3{
transition: all 4s;
padding: 25px 0 25px 0;
font-size: 25px;
}
.mainmenu p{
font-size: 20px;
padding: 25px 0 25px 0;
}