【CSS】CSS Cookbook例子：创建文字导航菜单和翻转特效

比较常用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<style type="text/css"><!--   
#navsite p {
  display: none
}   
#navsite {   
  font-family:Verdana, Arial, Helvetica, sans-serif;   
  font-size:0.7em;   
  font-weight:bold;   
  12em;   
  border-right:1px solid #666;   
  padding:0;   
  margin-bottom:1em;   
  background-color:#9cc;   
  color:#333;   
}   
#navsite ul {   
  list-style:none;   
  margin:0;   
  padding:0;   
}   
#navsite ul li {   
  margin:0;   
  border-top:1px solid #003;   
}   
#navsite ul li a {   
  display:block;   
  padding:2px 2px 2px 0.5em;   
  border-left:10px solid #369;   
  border-right:1px solid #69c;   
  border-bottom:1px solid #369;   
  background-color:#036;   
  color:#fff;   
  text-decoration:none;   
  100%;   
}   
html>body #navsite ul li a {   
  auto;   
}   
#navsite ul li a:hover {   
  border-left:10px solid #036;   
  border-right:1px solid #69c;   
  border-bottom:1px solid #369;   
  background-color:#69f;   
  color:#fff;   
}   
--></style>
</head>  
<body>  
<div id="navsite">  
  <p>Site navigation:</p>  
  <ul>  
    <li><a href="/">Home</a></li>  
    <li><a href="/about/">About</a></li>  
    <li><a href="/archives/">Archives</a></li>  
    <li><a href="/writing/">Writing</a></li>  
    <li><a href="/speaking/">Speaking</a></li>  
    <li><a href="/Contact/">Contact</a></li>  
  </ul>  
</div>  
</body>  
</html>