web作业—学校主页二级菜单制作
HTML部分
<div class="menuClass">
<div id="nav" class="widtH80">
<div class="color3 hover">
<a href="#" title="岗位设置" class="color2">首页</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">首页1</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">首页2</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="岗位设置" class="color2">岗位设置</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">岗位设置(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">岗位设置(二)</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学建设" class="color2">教学建设</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学建设(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学建设(二)</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学运行" class="color2">教学运行</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second"> 教学运行(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学运行(二)</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学保障" class="color2">教学保障</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学保障(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学保障(二)</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="教学评估" class="color2">教学评估</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学评估(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">教学评估(二)</a>
</div>
</div>
</div>
<div class="color3 hover">
<a href="#" title="规章制度" class="color2">规章制度</a>
<div class="hover-content">
<div class="hover-content-font">
<a href="#" class="link_menu_second">规章制度(一)</a>
</div>
<div class="hover-content-font">
<a href="#" class="link_menu_second">规章制度(二)</a>
</div>
</div>
</div>
</div>
</div>
CSS部分
body{font-size: 12px; color: #8a898e;}
.color3{
display: block;
/*width: 120px;*/
width: 130px;
height: 50px;
float: left;
text-align: center;
font-size: 15px;
}
.color3:hover{
background: #9982BC;
}
.color2{
color: #FFFFFF;
position: relative;
top: 14px;
}
#nav{
height:50px;
background-color: #533B77;
}
/*规划伪类选择器*/
.hover:hover{
position: relative;
}
.hover-content{
display: none;
}
.link_menu_second{
color: darksalmon;
}
.hover:hover .hover-content{
color: #fff;
line-height: 3;
width: 160px;
/*height: 100px;*/
top: 50px;
background: #533B77;
position: absolute;
display: block;
}
.hover-content-font{
height: 50px;
}
.flex{
display: flex;
}
.bodyClass{
width: 100%;
background: #FFFFFF;
}
.menuClass{
background: #533B77;
}
.widtH80{
width: 80%;
margin: 0 auto;
}