<style>
#top{
100%;
height: 60px;
background-color: green;
}
#top_title{
250px;
height: 48px;
margin-left: 200px;
border: 0px black solid;
font-family:"楷体";
float: left;
}
#top_right{
750px;
height: 60px;
border: 0px black solid;
margin-right: 150px;
float: right;
}
.top_nav{
120px;
max-height: 48px;
float: left;
text-align: center;
line-height: 60px;
overflow: hidden;
position: relative;
z-index: 3;
}
.top_nav:hover{
background-color:darkgray;
cursor: pointer;
max-height: 500px;
transition: 0.8s;
}
.nav_1{
list-style: none;
}
.nav_1 li{
height: 50px;
line-height: 50px;
background-color:skyblue;
}
.nav_1 li:hover{ //鼠标指向变小手，变色
background-color:darkturquoise;
cursor: pointer;
}
</style>
<body>
<div id="top"> //先设置整体的div
<div id="top_title"><font size="7" color="white">BHGG生态园</font></div> //标题div
<div id="top_right"> //导航总div
<div class="top_nav">首页</div>
<div class="top_nav">
产品展示
<ul class="nav_1"> //下拉菜单显示
<li>采摘</li>
<li>水果摊</li>
<li>畜牧</li>
<li>水产</li>
</ul>
</div>
<div class="top_nav">
休闲娱乐
<ul class="nav_1">
<li>cs野战</li>
<li>休闲垂钓</li>
<li>烧烤野炊</li>
<li>休闲客房</li>
</ul>
</div>
<div class="top_nav">
生态餐厅
<ul class="nav_1">
<li>肉类</li>
<li>海鲜类</li>
<li>蔬菜类</li>
</ul>
</div>
<body>