nav练习总结

要求完成附件中的导航效果，中英文切换效果要求兼容所有浏览器；动画过渡效果高版本浏览器实现即可。

第一个版本之sunorry

第一个版本是用CSS Sprite实现，首先我制作的如下图片。

其中要注意的是图片必须确定每个导航栏的宽度高度。

实现过程

1. 外部div设置宽度，高度（高度为图片的一半，以便挡住下方）；
2. div里包括ul和li,a，然后使用text-indent: -2000px;将文字移出，这样会让无css的情况下会出现文字；
3. 动画过过渡：-webkit-transition: all 0.4s ease-out 0s;

4. #nav_normal{
   	background-position: -118px 0px; 
   	}
   #nav_normal:hover{
   	background: url(nav.png) no-repeat -118px -60px;
   	}

nav导航之lin建议

1. div不要加图片，因为图片在a上；
2. <li>float后我在<ul>上加了overflow:hidden;让ul包含li，但是忘了ie，得加上zoom:1来出发haslayout闭合元素，以防li浮动出现bug；
3. 若设置了text-indent 来把文字隐藏，最好加上overflow:hidden 来截断文字，以防出现不必要的问题；

nav导航之sunorry，无图

       第一次思路是用二级菜单，将二级菜单定位到一级位置(margin-top: -28px;)，然后display:none;最后hover时display为block。

       这种思路结构复杂，且不能实现动画效果，在ie下也不行。

  下来采用绝对相对定位。

1. div的下的a中包含span；
2. div30px，a30px，span30px（定位使其在a正下放）；
3. a:hover{top:-30px}

    注意事项，过渡代码应写在<a>上，而不是span上。

注意hack

1. 在*{font-size:20px}后，div{font-size:0}这是为了清除display:inline-block;后，各个<a>产生的空隙;
2. 在span上cursor: pointer;      在ie下让鼠标也变成“手形状”；
3. ie下的hover，a:hover{border: none; /*加了这句ie6下搞定了*/ padding: 0; /*ie8下就可以了*/}

nav导航之lin，无图

基本上是一样的思路，只不过在div上加了display:inline-block;*display:inline;*zoom:1;来让ie6支持inlin-block