js实现导航菜单_js实现导航栏中英文切换效果

思路：

ul的高度为li的一半，ul{overflow:hidden}

li:hover{margin-top:-40px;}

 

 代码如下

*{padding:0; margin:0;}

li{ list-style:none; }

a{ text-decoration:none;}

.nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}

.list{ width:1000px; height:40px; margin:0 auto;}

.list li{ float:left;}

.list li a{ display:block; transition:0.3s;}

.list b,.list i{ display:block; padding:0 30px; color:#aaa; line-height:40px; text-align:center;}

.list b{ font-weight:100}

.list i{ font-style:normal; background:#333; color:#fff;}

.list a:hover{ margin-top:-40px;}

 

 

  

  Index

  首页

  

 

 

  

  course

  职业课程

  

 

 

  

  study

  就业学习

  

 

 

  

  BBS

  社区

  

 

 

  

  JiKe+

  发现+

  

 

 

 

js实现导航菜单_js实现导航栏中英文切换效果

http://m.bbyears.com/wangyetexiao/119933.html

推荐访问:js实现继承 js实现拖拽 js实现继承的方法