用XHTML做带阴影的导航菜单

脚本代码

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title> navigator shadow css - http://www.never-online.net </title>
 <meta http-equiv="ImageToolbar" content="no" />
 <meta name="author" content="never-online, BlueDestiny"/>
 <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online"/>
 <meta name="description" content="BlueDestiny, never-online"/>
 <meta name="title" content=" - http://www.never-online.net" />
 <meta name="creator.name" content="never-online, BlueDestiny" />
 <style type="text/css" media="all" title="Default">
/**
 * design by never-online
 * http://blog.never-online.net
 */

/* basic css */
body {
  margin:30px 0 10px 0;
  font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
  background-color:#f3f3e0;
}
h1.left {
  text-align:left;
  padding-left:30px;
}
a {
  text-decoration:none;
}
ul, li {
  margin:0;
  padding:0;
}

/* navigator css */
.wrapper {
  background-color:#629b5b;
  border-bottom:2px solid #e0e9d0;
}
.innerWrapper {
  border-top:2px solid #8bb486;
}
.innerWrapper #navigator {
  padding:5px 0 5px 0;
  border-top:2px solid #71a46b;
  border-bottom:1px solid #54814e;
}
.innerWrapper li {
  list-style-type:none;
  display:inline;
  margin:2px 10px 2px 10px;
}
.innerWrapper li a {
  padding:2px 9px 2px 9px;
  font-family: tahoma;
  font-weight:bold;
  font-size:10.2pt;
  color:#ffffcc; /*yellow*/
  font-variant:small-caps;
}
.innerWrapper li {
  padding:2px 9px 2px 9px;
  font-family: tahoma;
  font-size:10pt;
  color:#ffffcc; /*yellow*/
}
.innerWrapper li a:hover {
  background-color:#6c9e66;
  border-width:1px;
  border-style:solid;
  border-color:#7ba775 #54814e #54814e #7ba775;
  padding:2px 8px 2px 8px;
}
.innerWrapper li.youAreHere a {
  border-width:1px;
  border-style:solid;
  border-color:#55814e #7ca775 #7ca775 #55814e;
  background-color:#64985c;
  padding:2px 9px 2px 9px;
  color:#e8ebc0;
}
.innerWrapper li.youAreHere a:hover {
  border-width:1px;
  border-style:solid;
  border-color:#55814e #7ca775 #7ca775 #55814e;
  background-color:#64985c;
  padding:2px 9px 2px 9px;
  color:#e8ebc0;
}
.shadowWrapper {
  height:3px;
  overflow:hidden;
  border-bottom:2px solid #a1bc94;
  background-color:#54814e;
}

/* content */
div#content {
  margin-top:40px;
  padding:30px;
}

/* footer */
div#footer {
  margin-top:40px;
  text-align:center;
  font-size:10pt;
}
 </style>
 <body id="www.never-online.net">
  <h1 class="left"> shadow css navigator </h1>
  <div id="wrapper" class="wrapper">
    <div id="innerWrapper" class="innerWrapper">
      <ul id="navigator">
      <li class="youAreHere"><a href="http://www.never-online.net"> Home </a></li>
      <li><a href="http://blog.never-online.net"> Blog </a></li>
      <li><a href="http://www.never-online.net/music"> Music </a></li>
      <li><a href="http://www.2ky.cn/js"> Code </a></li>
      <li><a href="http://www.never-online.net/about"> About </a></li>
      <li> Power by blog.never-online.net</li>
      <li> more css or js code </li>
      </ul>
    </div>
    <div id="shadow" class="shadowWrapper"></div>
  </div>
  <div id="content"> click <a href="http://www.never-online.net/blog/article.asp?id=57"> href </a> to disscuss with this menu </div>
  <div id="footer"> never-online, BlueDestiny - http://www.never-online.net </div>
 </body>
</html>

当前页面所处路径为共享世纪 / 网页特效 / 菜单导航 / ，本特效的Tag为：共享世纪

主要是有一个阴影，完全没有用图片，都是用css做的，但还不算太逼真。
支持Mozilla，Opera，IE。

会员登陆close X