<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0px;
padding: 0px;
}
.nav{
500px;
height: 46px;
position: absolute;
top: 0px;
left: 0px;
z-index: 900;
}
.nav-title{
100px;
max-height: 46px;
text-align: center;
line-height: 46px;
float:left;
background-color: #018b3e;
font-size: 20px;
overflow: hidden;
transition: 0.5s;
}
.nav-title:hover{
background-color:#ff6b00;
cursor: pointer;
max-height: 500px;
}
.nav-title ul{
list-style:none;
}
.nav-title li{
background-color:red;
}
.nav-title li:hover{
cursor: pointer;
background-color:rosybrown;
}
.content{
500px;
height: 500px;
margin-top: 46px;
position: absolute;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-title">FF
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
<li>pr</li>
<li>body</li>
</ul>
</div>
<div class="nav-title">HTML
<ul>
<li>div</li>
<li>span</li>
</ul>
</div>
<div class="nav-title">CSS
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
</ul>
</div>
<div class="nav-title">.NET
<ul>
<li>div</li>
</ul>
</div>
<div class="nav-title">JAVASCRIPT
<ul>
<li>div</li>
<li>span</li>
<li>img</li>
<li>pr</li>
</ul>
</div>
</div>
<div class="content">
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
12334556667<br>
</div>
</body>
</html>