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

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

效果

 

结构

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