html点击超链接,展开列表?

2022-08-06 社会 78阅读

使用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; 


声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com