<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
margin: 20px 50px;
}
.menu li {
list-style: none;
width: 120px;
height: 35px;
line-height: 35px;
color: white;
text-align: center;
border-bottom: 1px solid lightgray;
}
.menu>li {
background-color: #8FBC8F;
overflow: hidden;
}
.menu>li:hover {
height: auto;
}
.menu li ul li {
background-color: lightsteelblue;
}
</style>
</head>
<body>
<ul class="menu">
<li>
Menu 1
<ul>
<li>Menu 1-1</li>
<li>Menu 1-2</li>
<li>Menu 1-3</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Menu 2-1</li>
<li>Menu 2-2</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Menu 3-1</li>
<li>Menu 3-2</li>
<li>Menu 3-3</li>
<li>Menu 3-4</li>
<li>Menu 3-5</li>
</ul>
</li>
<li>
Menu 4
<ul>
<li>Menu 4-1</li>
<li>Menu 4-2</li>
</ul>
</li>
<li>
Menu 5
<ul>
<li>Menu 5-1</li>
<li>Menu 5-2</li>
<li>Menu 5-3</li>
<li>Menu 5-4</li>
</ul>
</li>
</ul>
</body>
</html>