[CSS]CSS Cookbook例子:创建水平导航菜单

感觉效果是不错的

[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 h5 {

  display: none

}   

#navsite ul {   

  padding:3px 0;   

  margin-left:0;

  border-bottom:1px solid #778;

  font:bold 12px Verdana,sans-serif;

}

#navsite ul li {   

  list-style:none;

  margin:0;   

  display:inline;

}   

#navsite ul li a {   

  padding:3px 0.5em;

  margin-left:3px;

  border:1px solid #778;

  border-bottom:none;

  background:#dde;

  text-decoration:none;

}   

#navsite ul li a:link{

  color:#448;

}

#navsite ul li a:visited{

  color:#667;

}

#navsite ul li a:link:hover,#navsite ul li a:visited:hover {   

  color:#000;

  background:#aae;

  border-color:#227;

}

#navsite ul li a#current {

  background:white;

  border-bottom:1px solid white;

}

--></style>

</head>  

<body>  

<div id="navsite">  

  <h5>Site navigation:</h5>  

  <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>

你可能感兴趣的:(导航菜单)