0顶

CSS实现的中英文双语导航菜单

稿源：互联网 2022-06-18 18:37:35 点击： 948 撤稿纠错

用CSS实现的中英文双语导航菜单，可自定义。

以下讨论的是和相关的CSS实现的中英文双语导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="http://www.zzjs.net" />
<title>完全用CSS实现的中英文双语导航菜单，zzjs整理收集，站长特效网欢迎您。。</title>
<style type="text/css">
a{
 color: #FFFF99;
 text-decoration: none;
}
a:hover{
 color: #FFFFFF;
 text-decoration: underline;
}
#nav{
 padding: 10px 10px 0;
 font-size: 12px;
 font-weight: bold;
 margin: 1em 0 0;
 list-style:none;
}
#nav li{
 float: left;
 margin-right: 1px;
}
.bi{
 position: relative;
 z-index: 0;
}
.bi:hover{
 z-index: 99;
}
.bi:hover span{
 visibility: visible;
 top: 0;
 left: 0;
 cursor: pointer;
}
.bi span{
 position: absolute;
 left: -999em;
 visibility: hidden;
}
#nav li a,.bi:hover span{
 line-height: 20px;
 text-decoration: none;
 background: #DDDDDD;
 color: #666666;
 display: block;
 width: 80px;
 text-align: center;
}
#nav li a:hover,.bi:hover span{
 color: #FFFFFF;
 background: #DC4E1B;
}
.bi:hover span{
 padding-top: 2px;
}
#navbar{
 background: #DC4E1B;
 height: 8px;
 overflow: hidden;
 clear: both;
}
</style>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="top">
  <ul id="nav">
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">Home<span>站长特效网</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">About us<span>导航菜单2</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=6">Products<span>导航菜单3</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=3">Services<span>导航菜单4</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=4">Contact<span>导航菜单5</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=5">Home<span>导航菜单6</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">About us<span>导航菜单7</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">Products<span>导航菜单8</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">Services<span>导航菜单9</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">Contact<span>导航菜单10</span></a></li>
  <li><a class="bi" href="<#ZC_BLOG_HOST#>?cat=2">Home<span>导航菜单11</span></a></li>
</ul>
 </div>
 <div id="navbar"></div>
 </body>
 </html>

关于CSS实现的中英文双语导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016299362365.shtml方便下次再访问哦。

·上一篇： 文字逐个弹出效果
·下一篇： 链接文字渐隐渐显效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

CSS实现的中英文双语导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻