注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

kangzye的博客

加Q群25382780切磋java,加19360923群研究JavaScript

 
 
 

日志

 
 

css实现下拉菜单  

2011-01-19 11:07:40|  分类: css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这里只说原理:
css里面包含鼠标动作:

 link:连接平常的状态   

   active:连接被按下的时候   

   visited:连接被访问过之后   

   hover:鼠标放到连接上的时候

下拉菜单的关键点就是,鼠标移动到一个元素A上后,就把B显示出来。
那么可以这么做达到下拉菜单的效果:
#style.css
A:hover B{
    display:block;
}
//上面的意思就是当A处于mouseover情况下的B,其display设置为 block。
eg:
<div id='main' class='a'><span>菜单</span><div id='child' class='sub'><span>子菜单</span></div></div>
样式设置: div#main:hover  div#child{display:block; }  仅此一句就搞定,且效率很高。不过貌似IE6上是有问题的,未证实过。
据称:hover 这种形式叫做伪类,css1和 css2 标准都支持,但css1仅对a标签有效果,css2则可对任意元素有效。
  评论这张
 
阅读(380)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017