2022-06-10 分类: 网站建设
效果图:
点击菜单 中英文切换
css样式:
.top-nav
{
font-size: 12px;
font-weight: bold;
list-style: none;
border-bottom: 8px solid #DC4E1B;
overflow: auto;
//去浮动,使下级的浮动自适应或 overflow:hidden;
}
.top-nav li
{
float: left;
margin-right: 1px;
}
.top-nav li a
{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
/*设置正常状态英文菜单隐藏*/
.top-nav li a span{
display:none;
}
/*鼠标移动到链接上面时将英文菜单显示*/
.top-nav li a:hover span{
display:block;
}
/*鼠标移动到链接上面时将中文菜单位置上移*/
.top-nav li a:hover{
margin-top:-20px;
}
名称栏目:变换菜单展示及制作
文章位置:/news13/165813.html
成都网站建设公司_创新互联,为您提供网站导航、网站策划、做网站、App开发、App设计、营销型网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容