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

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;meta name="Keywords" content="bilingual menu,中英文双语菜单" /&gt;
&lt;meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /&gt;
&lt;meta content="all" name="robots" /&gt;
&lt;meta name="author" content="forestgan" /&gt;
&lt;meta name="copyright" content="http://www.forest53.com" /&gt;
&lt;title&gt;完全用CSS实现的中英文双语导航菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
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;
}
&lt;/style&gt;
&lt;link href="../css/main.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="top"&gt;
&lt;ul id="nav"&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/"&gt;Home&lt;span&gt;首　页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/blog"&gt;Blog&lt;span&gt;日志&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/guestbook"&gt;guestbook&lt;span&gt;留言本&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.pickbar.com/"&gt;Pickbar&lt;span&gt;精品吧&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.fansir.com/"&gt;fansir&lt;span&gt;樊SIR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="navbar"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>完全用CSS实现的中英文双语导航菜单</title>

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>

<li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li>

<li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li>

<li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li>

</ul>

</body>

</html>

一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复