首页 > 其他 > 详细

菜单中英文切换

时间:2016-07-22 19:40:50      阅读:262      评论:0      收藏:0      [点我收藏+]

效果:

技术分享

代码:

<!DOCTYPE html>

<html>

<head>

<title>JQuery实现下拉菜单</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

*{margin: 0px;padding: 0px}

.nav-ul{list-style: none;border-bottom: 8px solid #666;overflow: auto;}

.nav-ul li{float: left;line-height: 40px;text-align: center;position: relative;}

.nav-ul li a {text-decoration: none;color: #000;display: block;padding:0 10px;}

.nav-ul li a:hover{color: #FFF;background-color: #666}


.nav-ul li a span{display: none;}

.nav-ul li a:hover span{display: block;}

.nav-ul li a:hover{margin-top: -40px}

</style>

</head>

<body>

<ul class="nav-ul">

<li><a href="">首页<span>home</span></a></li>

<li class="nav-ul-li"><a href="">我的课程<span>course</span></a></li>

<li><a href="">关于我们<span>about</span></a></li>

</ul>

</body>

</html>


本文出自 “素颜” 博客,请务必保留此出处http://suyanzhu.blog.51cto.com/8050189/1828815

菜单中英文切换

原文:http://suyanzhu.blog.51cto.com/8050189/1828815

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!