81 lines
1.2 KiB
HTML
81 lines
1.2 KiB
HTML
|
<!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>
|