下拉菜单栏对齐问题

我创建了一个下拉菜单，它的宽度是960px，下拉div框宽度是900px，但我需要的是当我将鼠标悬停在最后或第二个菜单上时，下拉div带有900px和一个大的滚动条出现在页面上，我需要它自动调整浮动权或适当的调整，下拉菜单栏对齐问题
<ul id="menu"> 
    <li><a href="#" class="drop">Music</a><!-- Begin 4 columns Item --> 
     <div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

<li><a href="#" class="drop">Acting</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
</ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

<li><a href="#" class="drop">Singing</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li>   
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

<li><a href="#" class="drop">Sports</a> 
     <div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 
<li><a href="#" class="drop">Fitness</a> 
     <div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 
<li><a href="#" class="drop">MMA</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 
<li><a href="#" class="drop">Modelling</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 
<li><a href="#" class="drop">Dance</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 
<li><a href="#" class="drop">Creative Arts & Design</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

<li><a href="#" class="drop">Kids Talent</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

<li><a href="#" class="drop">Others</a> 
<div class="dropdown_5columns"><!-- Begin 4 columns container --> 
      <div class="col_5"> 
       <ul> 
<li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
        <li><a href="#">ThemeForest</a></li> 
        <li><a href="#">GraphicRiver</a></li> 
        <li><a href="#">ActiveDen</a></li> 
        <li><a href="#">VideoHive</a></li> 
        <li><a href="#">3DOcean</a></li> 
        <li><a href="#">NetTuts</a></li> 
        <li><a href="#">VectorTuts</a></li> 
        <li><a href="#">PsdTuts</a></li> 
        <li><a href="#">PhotoTuts</a></li> 
        <li><a href="#">ActiveTuts</a></li> 
       </ul> 
      </div> 
     </div><!-- End 4 columns container --> 
    </li><!-- End 4 columns Item --> 

</ul>
来源
2013-08-30 Gaurav
移动position: relative;从#menu里只是#menu 。然后，下拉菜单将从菜单中定位，而不是菜单链接。
来源
2013-08-30 11:42:46 Razz
感谢您的帮助... :) – Gaurav
没有问题，我也建议使用显示：无;并显示：block;隐藏下拉菜单而不是左侧：-999em。 – Razz
在 #menu li {}
删除此行position:relative;
来源
2013-08-30 11:50:59
下拉菜单栏对齐问题

回答

相关问题
