简单下拉菜单（限制宽度）

效果

 

结构

  <div class="nav">
    <ul id="nav">
      <li class="navTop"><a href="">限定宽度</a>
        <ul>
          <li><a href="">单</a></li>
          <li><a href="">下拉菜单</a></li>
          <li><a href="">下拉菜单下拉菜单下拉菜单</a></li>
        </ul>
      </li>
      <li class="navTop"><a href="">限定宽度</a>
        <ul>
          <li><a href="">下拉菜单</a></li>
          <li><a href="">下拉菜单</a></li>
          <li><a href="">下拉菜单</a></li>
        </ul>
      </li>
      <li class="navTop"><a href="">限定宽度</a>
        <ul>
          <li><a href="">下拉菜单</a></li>
          <li><a href="">下拉菜单</a></li>
          <li><a href="">下拉菜单</a></li>
        </ul>
      </li>
    </ul>
  </div>

 样式

.nav {
}
.nav li.navTop {
    float: left;
}
.nav li.navTop a {
    color: #009900;
    text-align: center;
    display: block;
    border: 1px solid #33CC00;
    line-height: 30px;
    width: 80px;
    padding-right: 10px;
    padding-left: 10px;
}
.nav li.navTop a:hover {
    color: #FFFFFF;
    background-color: #339900;
    text-decoration: none;
}
.nav li.navTop ul {
    display: none;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #669900;
    border-bottom-color: #669900;
    border-left-color: #669900;
}
.nav li.navTop:hover ul {
    display: block;
}
.nav li.navTop ul li a {
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    line-height: 20px;
    text-align: left;
    overflow: auto;
}
.nav li.navTop ul li a:hover {
    color: #FFFFFF;
    background-color: #669900;
}

 行为

<script language="JavaScript">
    navhover = function()
    {
        var lis = document.getElementById('nav').getElementsByTagName('li');
        for(i = 0; i < lis.length; i++)
        {
            var li = lis[i];
            if (li.className == 'navTop')
            {
                li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
                li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", navhover);
    /* or with jQuery:
    $(document).ready(function(){
        $('nav li.navTop').hover(
            function() { $('ul', this).css('display', 'block'); },
            function() { $('ul', this).css('display', 'none'); });
    });
    */
</script>