正在阅读:利用条件注释制作下拉菜单利用条件注释制作下拉菜单

2007-06-21 23:20 出处: 作者:greengnn 责任编辑:chenzhenjia

  采用双样式,给ie和非ie分别定义样式,如果IE时候,在final_drop.css基础上补充一个final_drop_ie.css
  先看看非ie下的css是怎样定义的

  .menu ul li ul {
  display: none;
  }
  /* specific to non IE browsers */
  .menu ul li:hover a {
  color:#fff; 
  background:#bd8d5e;
  }
  /*定义鼠标滑过样式*/
  .menu ul li:hover ul {
  display:block; 
  position:absolute; 
  top:3em;
  margin-top:1px;
  left:0; 
  width:150px;
  }

  在非IE下,看到鼠标滑过时候li包含的ul显示了,因为这些浏览器支持li:hover用法
  IE下的css

  .menu ul li a:hover {
  color:#fff; 
  background:#bd8d5e;
  }
  /*当鼠标滑过时li包含的ul显示*/
  .menu ul li a:hover ul {
  display:block; 
  position:absolute; 
  top:3em; 
  left:0;
  background:#fff;
  margin-top:0;
  marg\in-top:1px;
  }

  继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
  因为

  <!--[if lte IE 6]>
  </a>
  <![endif]-->


  所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容
  而IE7下通过li:hover显示的效果一样
  下面是作者的原模型(三级菜单纵向和相结合的)
  就是在简单模型的基础上复杂化

 

您可能还对以下内容感兴趣:探讨!SEO和UCD的关系

经典!CSS的十八般技巧

你知道吗?Web设计国际一般流程

键盘也能翻页,试试“← →”键

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品