下面各举一例，
鼠标悬浮触发：（此例ie6下无效，因其暂不支持li:hover的伪类）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>纯CSS下拉菜单</title>
<style type="text/css">
a{
font-size:12px
text-decoration:none
color:#000000}
li ul{
display:none
margin-left:5px}
li:hover ul{
width:306px
padding:20px
height:250px
display:block
}
li:hover .fira{border-bottom:#FFFFFF 1px solid
}#kpk{
position:relative
width:420px
}
#kpk>li{
float:left
list-style:none
margin-right:20px
}
#kpk>li .fira{
border:1px #c6c6c6 solid
}
.seca{
position:absolute
z-index:1
left:-5px
top:23px
border:1px #c6c6c6 solid
height:250px
width:306px
padding:20px
height:250px
}
.fira{
width:70px
display:block
line-height:22px
background-color:white
text-align:center
z-index:2
}</style>
</head><body>
<div>
<ul id="kpk">
<li>
<a href="#" class="fira">首页</a>
<ul class="seca" rel="first">
<li><A href="#" target=_self>1.首页新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.首页最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.首页物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.首页弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.首页揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.首页美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.首页浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.首页西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.首页女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.首页建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接一</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接一新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接一最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接一物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接一弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接一揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接一美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接一浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接一西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接一女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接一建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接二</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接二新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接二最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接二物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接二弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接二揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接二美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接二浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接二西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接二女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接二建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>31</li>
<li>32</li>
<li>33</li>
</ul>-->
</li>
<li>
<a href="#" class="fira">链接三</a>
<ul class="seca">
<li><A href="#" target=_self>1.链接三新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A></li>
<li><A href="#" target=_self>2.链接三最高法:承诺不判赖昌星死刑没有超越法律程序</A></li>
<li><A href="#" target=_self>3.链接三物权法:满70年住宅建设用地使用权将自动续期</A></li>
<li><A href="#" target=_self>4.链接三弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A></li>
<li><A href="#" target=_self>5.链接三揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A></li>
<li><A href="#" target=_self>6.链接三美军高官:不排除和中国发生直接军事对抗可能</A></li>
<li><A href="#" target=_self>7.链接三浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A></li>
<li><A href="#" target=_self>8.链接三西方炒作"中国航母威胁论"称05年已正式服役</A></li>
<li><A href="#" target=_self>9.链接三女孩生活无法自理请人大代表递交安乐死议案</A></li>
<li><A href="#" target=_self>10.链接三建设部：住房公积金制度将覆盖农民工</A></li>
</ul>
<!--<ul>
<li>41</li>
<li>42</li>
<li>43</li>
</ul>-->
</li>
</ul>
</div>
</body>
</html>
锚点点击例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>左右布局</title>
<style type="text/css">
#nav{
width:303px
height:200px
border:1px solid #CCCCCC
}
#column a {
float:left
width:100px
border-right:1px solid #CCC
border-bottom:1px solid #CCC
font:bold 14px/30px Arial, Helvetica, sans-serif
color:#000
text-decoration:none
text-align:center
}
#contant {
width:303px
height:162px
overflow:hidden
}
ul {
margin:0
padding:0
list-style-type:none
padding:4px 0 0 5px
}
li {
font-size:12px
overflow:hidden
padding-left:2px
line-height:27px
}
</style>
</head>
<body>
<div id="nav">
<div id="column"><a href="#localnew">本地新闻</a><a href="#innernew">国内新闻</a><a href="#enterment" >娱乐新闻</a></div>
<div id="contant">
<ul id="localnew">
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS </a></li>
<li><a href="#">我喜欢CSS</a></li>
<li><a href="#">我喜欢CSS</a></li>
</ul>
<ul id="innernew">
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程 </a></li>
<li><a href="#">我喜欢编程</a></li>
<li><a href="#">我喜欢编程</a></li>
</ul>
<ul id="enterment">
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工 </a></li>
<li><a href="#">我喜欢美工</a></li>
<li><a href="#">我喜欢美工</a></li>
</ul>
</div>
</div>
</body>
</html>
楼主自行copy代码到本地查看，样式微调。。。
1、方法一：
给锚点文本标签添加id，使用<a href="#"></a>来定位，当单击a链接时，就会跳到id为a01的p标签处；
如：
<div><a href="#a01"></a></div>
<p>练习</p><p>练习</p><p>练习</p><p>练习</p><p>练习</p>
<p id="a01">练习</p>
这样的定位可以针对任何标签来定位。
2、方法二：
给a标签的文本添加锚点，单击链接可跳到name为a01的a标签处；
如：
<div><a href="#a01"></a></div>
<p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p><p>xxx</p>
<a name="a01" href=“#”>练习</a>
使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。
3、方法三：
使用js，如：
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>
扩展资料：
类似的html元素用法：
1、超链接对象
超链接是超级链接的简称。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。
超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。
2、动态静态
超链接还可以分为动态超链接和静态超链接。动态超链接指的是可以通过改变HTML代码来实现动态变化的超链接，例如可以实现将鼠标移动到某个文字链接上。而静态超链接，顾名思义，就是没有动态效果的超链接。
参考资料来源：百度百科-描点
参考资料来源：百度百科-超链接
技术文章 >web前端 >html教程求助：CSS超链接，选中中再点击其它地方，设置的选中样式就消失了。_html/css_WEB-ITnose
2016-06-24 12:16:52原创579
CSS设置：
#page a:hover {text-decoration:nonecolor:red}
#page a:active {text-decoration:underlinecolor:red}
选中后，再点击其它空白地方，设置的 a:active样式就消失了。 应该是该样式一直保留到点击同一级别的其它链接才对啊...
回复讨论(解决方案)
伪类，兼容性不是很好。你可以用 js 来做一个 点击后 增加一个 class 上去 。
a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF}/* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激活状态的时候，才算符合条件吧
CSS code?1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */a:active {color: #0000FF} /* 被选择的链接 */
这个只有被激……
这个在点击链接的时候不就算激活吗啊？
这个应该是点击的那一下，鼠标没有松开之前。。正在操作的过程中。。。。
这个应该是点击的那一下，鼠标没有松开之前。。正在操作的过程中。。。。
好吧，那请问下，怎么改呢？
改成a:visited不能达到你要的效果吗？
或者，如果你要的效果比较多的话，可以组合使用啊
比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。
按照自己的情况自己组合试试。
不过，如果操作次数多了话，最好清一下缓存，因为浏览器会记住你之前访问的网站，刷新之后，还是会显示已经访问过的情况。
改成a:visited不能达到你要的效果吗？
或者，如果你要的效果比较多的话，可以组合使用啊
比如a:visited:hover，这样表示已经访问过的链接，再有鼠标悬浮时的情况。
按照自己的情况自己组合试试
