站长论坛

标题: 中英文双语导航菜单 [打印本页]
作者: tzlink    时间: 2007-9-18 23:27
标题: 中英文双语导航菜单


老甘的《完全用CSS实现的中英文双语导航菜单》一文中使用“position: absolute;left: -999em;”将其左缩进N远，并通过“visibility: hidden;”将其物理隐藏（实际是占位的），此时显示英文导航。当hover触发时，z-index定义在上，并将其绝对定位位置设置为左上，设置visibility: visible;显示，此时span层覆盖在a层上，显示中文。

我们还可以还一种思维使用hover触发display属性实现：

CSS代码修改如下：

#nav li a,#nav li a:hover span {
  line-height: 20px;
  text-decoration: none;
  background: #DDDDDD;
  color: #666666;
  display: block;
  width: 80px;
  text-align: center;
  overflow:hidden;
}

#nav li a span {
  display:none;
}

#nav a:hover {
  position: relative;
}

#nav a:hover span {
  display:block;
  position:absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

#nav a:hover span {
  padding-top:2px;
}

#nav li a:hover,#nav li a:hover span {
  color: #FFFFFF;
  background: #DC4E1B;
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



  5. 中英文双语导航菜单

  7. * {margin:0;padding:0;}          
  8. #nav{
  9.         padding: 10px 10px 0;
  10.         font-size: 12px;
  11.         font-weight: bold;
  12.         font-family:Arial, Helvetica, sans-serif,宋体;
  13.         margin: 1em 0 0;
  14.         list-style:none;
  15. }

  17. #nav li{
  18.         float: left;
  19.         margin-right: 1px;
  20. }

  22. #nav li a,#nav li a:hover span{
  23.         line-height: 20px;
  24.         text-decoration: none;
  25.         background: #DDDDDD;
  26.         color: #666666;
  27.         display: block;
  28.         width: 80px;
  29.         text-align: center;
  30.         overflow:hidden;
  31. }

  33. #nav li a span{display:none;}

  35. #nav a:hover{
  36.         position: relative;
  37. }

  39. #nav a:hover span{
  40.         display:block;
  41.         position:absolute;
  42.         top: 0;
  43.         left: 0;
  44.         cursor: pointer;
  45. }

  47. #nav a:hover span{
  48.     padding-top:2px;
  49. }

  51. #nav li a:hover,#nav li a:hover span{
  52.         color: #FFFFFF;
  53.         background: #DC4E1B;
  54. }

  56. #navbar{
  57.         background: #DC4E1B;
  58.         height: 8px;
  59.         overflow: hidden;
  60.         clear: both;
  61. }





  67.    
  68.                 Home首　页
  69.                 About us关于我们
  70.                 Products产品展示
  71.                 Services售后服务
  72.                 Contact联系我们
  73.        
  74.        

复制代码




欢迎光临 站长论坛 (http://tzlink.com/bbs/) Powered by Discuz! X3.2