纯CSS打造中英文双语导航菜单

2024-09-05 12:19:14

字体：大中小

来源：转载

供稿：网友

用纯CSS打造的中英文双语导航菜单，主要用到CSS的A链接属性，本代码比较简洁，而且结构也很清淅，CSS初学者一看就会。

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS实现中英文导航菜单</title><style type="text/css">a{  color: #FFFF99;  text-decoration: none;}a:hover{  color: #FFF;  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: #DDD;  color: #666;  display: block;  width: 80px;  text-align: center;}#nav li a:hover,.bi:hover span{  color: #FFF;  background: #DC4E1B;}.bi:hover span{  padding-top: 2px;}#navbar{  background: #DC4E1B;  height: 8px;  overflow: hidden;  clear: both;}</style></head><body><ul id="nav">    <li>SitesPage<span>网站首页</span></li>    <li>About us<span>关于我们</span></li>    <li>Products<span>产品专区</span></li>    <li>Services<span>客户服务</span></li>    <li>Contact<span>联系我们</span></li></ul><div id="navbar"></div></body></html>

下一篇：很独特的纯CSS二级下拉菜单