使用CSS方法实现的效果（当鼠标悬停在科目上时，出现2级下拉菜单，2级菜单中包括“语文”，“数学”），此方法为纯CSS样式表功能实现，无任何js代码。
<html>
<head>
<style type="text/css">
*{ margin:0pxpadding: 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
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a >   ★科 目  </a>
<ul>
<li><a href="">语文</a>
</li>
<li><a href="">数学</a>
</li>
</ul></li>
</li>
<li id="alast"><a> 个人设置  </a>
<ul>
<li><a href=""> 帮助中心</a>
</li>
<li><a href=""> *** 作设置</a>
</li>
<li><a href="" >音频</a>
</li>
</ul></li>
</ul>
</div>
</body>
</html>
错误一、width="200px"前面少了一个空格错误二、a标签少了结束标签</a>
具体如下：
<html>
<head>
<title>语文资料 点击图片来进行访问</title>
<style>
</style>
</head>
<body>
<h3>点击图片来访问甘老师发的学习资料,祝学习愉快</h3>
<a href="链接地址，自己填下">
<img src="图片地址，自己填下" width="200px"/>
</a>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）