但是想要有交互特效，比如点击、拖曳、失焦、聚焦等特效都是需要结合js、jq来实现的。因此没办法做到点击a标签达到显示a内部其他dom内容。
不过css有个hover能实现鼠标移动到a标签上展示其下内容。比如最常见的鼠标经过展示下拉框，使用纯css就能达到，主要原因就是使用hover经过将下面的ul.submenu给显示出来
例如
<a href="#" id="a1">xxx
<ul style="display:none/*一开始是隐藏的，为了说明直接写在节点上*/">
<li><a href="#">111</a></li>
......
</ul>
</a>
css:
#a1:hover ul{ display:block/*鼠标经过将ul显示出来*/}
a:link{text-decoration:none /* 指正常的未被访问过的链接*/}
a:visited{text-decoration:none/*指已经访问过的链接*/}
a:hover{text-decoration:none/*指鼠标在链接*/}
a:active{text-decoration:none/* 指正在点的链接*/ }
把这些的颜色都设置一下便可以解决。
一个网页对应多个 HTML文件， 超文本标记语言文件以.htm（磁盘操作系统 DOS限制的外语缩写）为 扩展名或.html（外语缩写）为 扩展名。可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件，只用修改文件 后缀即可。
超文本标记语言， 标准通用标记语言下的一个应用。
“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。
<html><head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.menu{border-bottom: 1px solid #ccc}
.menu a{
width: 120px
height: 50px
text-decoration: none
display: block
float: left
text-align: center
line-height: 50px
}
.on{ border:1px solid #ccc}
</style>
<script>
$(function(){
$(".menu a").click(function(){
$(this).addClass("on").siblings().removeClass("on")
})
})
</script>
<body>
<div class="menu">
<a href="#" class="on">栏目一</a>
<a href="#">栏目二</a>
<a href="#">栏目三</a>
<a href="#">栏目四</a>
</div>
</body>
</html>
