不用层的最简单的二级下拉菜单

时间：2007-02-10 来源：白天的影子

不用层的最简单二级下拉菜单，兼容几乎所有的浏览器
<style>
#Nav {
    clear: both;
    margin: 0px;
    width: 750px
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    list-style-type: none
}
#Nav ul {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    list-style-type: none
}
#Nav li {
    float: left;
    width: 125px
}
#Nav li ul {
    left: -999em;
    width: 125px;
    position: absolute
}
#Nav li a {
    padding-right: 0px;
    display: block;
    padding-left: 0px;
    font-size: 11px;
    background: url(../images/Navbutbg.gif) #a2a2a2 repeat-x;
    padding-bottom: 5px;
    width: 124px;
    color: #555555;
    margin-right: 1px;
    padding-top: 5px;
    font-family: arial, helvetica, sans-serif;
    text-align: center;
    text-decoration: none
}
#Nav li ul a {
    padding-right: 0px;
    display: block;
    padding-left: 0px;
    font-size: 10px;
    background: url(../images/Navbutbg.gif) #a2a2a2 repeat-x;
    padding-bottom: 3px;
    width: 124px;
    color: #333333;
    text-indent: 5px;
    margin-right: 1px;
    padding-top: 3px;
    font-family: arial, helvetica, sans-serif;
    text-align: left;
    text-decoration: none
}
#Nav li a:hover {
    background: #ffa400;
    color: white
}
#Nav li ul a:hover {
    background: #ffa400;
    color: white
}
#Nav li:hover ul {
    left: auto
}
#Nav li.sfhover ul {
    left: auto
}
</style>

<div id="Container">
  <div id="Nav">
    <ul>
      <li><a href="#">text1</a>
        <ul>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
        </ul>
      </li>
      <li><a href="#">text2</a>
        <ul>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
        </ul>
      </li>
      <li><a href="#">text3</a>
        <ul>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
          <li><a href="#">text11</a></li>
        </ul>
      </li>
      </ul>
  </div>
</div>

HTML代码 <style> #Nav { clear: both; margin: 0px; width: 750px padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none } #Nav ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; list-style-type: none } #Nav li { float: left; width: 125px } #Nav li ul { left: -999em; width: 125px; position: absolute } #Nav li a { padding-right: 0px; display: block; padding-left: 0px; font-size: 11px; background: url(../images/Navbutbg.gif) #a2a2a2 repeat-x; padding-bottom: 5px; width: 124px; color: #555555; margin-right: 1px; padding-top: 5px; font-family: arial, helvetica, sans-serif; text-align: center; text-decoration: none } #Nav li ul a { padding-right: 0px; display: block; padding-left: 0px; font-size: 10px; background: url(../images/Navbutbg.gif) #a2a2a2 repeat-x; padding-bottom: 3px; width: 124px; color: #333333; text-indent: 5px; margin-right: 1px; padding-top: 3px; font-family: arial, helvetica, sans-serif; text-align: left; text-decoration: none } #Nav li a:hover { background: #ffa400; color: white } #Nav li ul a:hover { background: #ffa400; color: white } #Nav li:hover ul { left: auto } #Nav li.sfhover ul { left: auto } </style> <div id="Container"> <div id="Nav"> <ul> <li><a href="#">text1</a> <ul> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> </ul> </li> <li><a href="#">text2</a> <ul> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> </ul> </li> <li><a href="#">text3</a> <ul> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> <li><a href="#">text11</a></li> </ul> </li> </ul> </div> </div>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]