1．创建一个新的HTML文件百，该文件被称为测试。标题是“CSS实现的鼠标在导航栏上显示的超链接的下划线效果”。
2．在页面上写nav标签，放入三个超链接（首页，第一栏，第二栏），代码如下。
3．运行代码，效果如下。
4．使用backCSS来美化字体大小、颜色和导航字体的排列。守则如下。
5．运行代码，效果如下：可见，经过CSS样式美化，当鼠标经过时，显示蓝色。
6．使用CSS代码，实现鼠标在上面显示下划线效果，代码如下。
7．在浏览器中运行代码以达到预期的效果。
使用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>
先将要div1的内容隐藏，css代码：#div1{display：none；}
然后将函数 isHidden(oDiv)里面的display设置为显示的：vDiv.style.display = (vDiv.style.display == 'block')?'none':'block'
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{background:#ddd}
#div1{display:none}
</style>
</head>
<body>
<div style="cursor:hand" onclick="isHidden('div1')"><b>调查内容:</b></div>
<div id="div1">隐藏的内容</div>
<script type="text/javascript">
function isHidden(oDiv){
var vDiv = document.getElementById(oDiv)
vDiv.style.display = (vDiv.style.display == 'block')?'none':'block'
}
</script>
</body>
</html>
效果：
点击默认内容后：显示出了隐藏的内容
