纯CSS菜单效果。

CSS文件：

 <style>
      *
      {
          margin:0;
          padding:0;
          border:0;
      }
      body
      {
          margin:0;
          padding:0;
          border:0;
      }
      #nav
      {
          background:#666;
          line-height:24px;
          list-style-type:none;
      }
      #nav a
      {
          display:block;
          width:80px;
          text-align:center;
      }
      #nav a:link
      {
          color:#666;
          text-decoration:none;
      }
      #nav a:visited
      {
          color:#666;
          text-decoration:none;
      }
      #nav a:hover
      {
          color:#fff;
          font-weight:bold;
          text-decoration:none;
      }
      #nav li
      {
          float:left;
          width:80px;
          background-color:#ccc;
      }
      #nav li ul
      {
          list-style-type:none;
          width:85px;
          position:absolute;
          left:-999em;
          text-align:left;
      }
      #nav li ul li
      {
          width:85px;
          float:left;
          background-color:#F6F6F6;
      }
      #nav li ul a
      {
          display:block;
          width:75px;
          _width:85px;
          padding-left:10px;
          margin:0 auto;
          text-align:left;
      }
      #nav li ul a:link
      {
          color:#666;
          text-decoration:none;
      }
      #nav li ul a:visited
      {
          color:#666;
          text-decoration:none;
      }
      #nav li ul a:hover
      {
          color:#f3f3f3;
          text-decoration:none;
          background:#c00;
          font-weight:normal;
      }
      #nav li:hover ul
      {
          left:auto;
      }
    </style>

body内容：

 <ul id="nav">
      <li><a href="http://www.baidu.com">不写js试试</a>
        <ul>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com">不写js试试</a>
        <ul>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com">不写js试试</a>
        <ul>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
        </ul>
      </li>
      <li><a href="http://www.baidu.com">不写js试试</a>
        <ul>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
          <li><a href="http://www.baidu.com">重新试试</a></li>
        </ul>
      </li>
   </ul>