使用CSS方法实现的效果(当鼠标悬停在科目上时,出现2级下拉菜单,2级菜单中包括“语文”,“数学”),此方法为纯CSS样式表功能实现,无任何js代码。
*{ margin:0px; padding: 0px; }
#nav {
font-family:微软雅黑 ;
position: relative;
width: 100% ;
height:30px ;
font-size:14px;
color:gray;
margin: 0 auto;
background-color:#F1F1F1;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
padding: 4px;
}
#nav ul li input{
font-family:微软雅黑 ;
font-size:14px;
color:gray;
border: none;
background-color: transparent;
}
#nav ul li a {
text-align: center;
display:block;
text-decoration:none;
color:gray;
}
#nav ul li ul {
display: none
}
#nav ul li a:HOVER {
color: #FF4400
}
#nav ul li:hover ul {
display: block;
position: absolute;
padding-top: 5px;
margin-left: -9px;
}
#nav ul li:hover ul li{padding: 0px;}
#nav ul li:hover ul li a {
display:block;
background-color:#F1F1F1;
color:gray;
width: 80px;
height:30px;
line-height:30px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
border:1px solid #f2f2f2;;
}
#nav ul li ul li a:hover {
background-color: white;
color:#FF4400;
}