防止CSS下拉菜單超出屏幕向右擴展

我的網站標題中有一個水平CSS下拉菜單。菜單也在標題中浮動。當鼠標懸停在菜單上並且出現下拉菜單時，如果下拉菜單中包含子菜單的子菜單，則會出現問題，菜單會從屏幕右側完全飛到右側，無法看到它們，而您得到一個水平滾動條。使用這樣的列表項（我已刪除了一噸的項目爲簡潔起見）創建該菜單：防止CSS下拉菜單超出屏幕向右擴展

<nav id="main-menu" role="navigation"> 
    <div class="menu-navigation-container"> 
     <ul class="menu">   
     <li class="last expanded"> 
      <a href="/content/clients" title="Clients">Clients</a> 
      <ul class="menu"> 
       <li class="first expanded"> 
        <a href="/content/information-technology-client" title="IT Client Services">Information Technology</a> 
        <ul class="menu"> 
        <li class="first expanded"> 
         <a href="/content/enterprise-applications-client" title="Client Enterprise Applications">Enterprise Applications</a> 
         <ul class="menu"> 
          <li class="first leaf"><a href="/content/oracle-client" title="Oracle Client Services">Oracle</a></li> 
          <li class="leaf"><a href="/content/peoplesoft-client" title="PeopleSoft Client Services">PeopleSoft</a></li> 
          <li class="leaf"><a href="/content/sap-client" title="SAP Client Services">SAP</a></li> 
          <li class="leaf"><a href="/content/lawson-client" title="Lawson Cilent Services">Lawson</a></li> 
          <li class="leaf"><a href="/content/hyperion-client" title="Customer Relationship Management Client Services">Hyperion</a></li> 
          <li class="leaf"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>        
         </ul> 
        </li>      
        </ul> 
       </li>    
      </ul> 
     </li> 
     </ul> 
    </div> 
    <div class="clear"></div> 
</nav> 
<!-- end main-menu -->

因此，當你到「企業應用程序」是菜單起飛的屏幕基本上所以你不能甚至看到它。我對菜單的HTML進行了有限的控制，因爲它是由系統生成的。我無法創建其他ID或類。我只能用我在這裏展示的東西來工作。然而，我可以將jQuery添加到自定義文件中來解決這個問題。任何人都可以想到任何jQuery（或只是簡單的香草javaScript），可能能夠防止列表項從屏幕上飛出？此外，這是一個內聯網應用程序，所以很遺憾，我無法將您發送給演示。哦，我可以訪問外部CSS文件，所以我可以添加額外的CSS，我只是不能添加/編輯菜單本身的ID和類。

THANKS

來源

2013-05-13 Erich H.

CSS在哪裏？ – 2013-05-13 22:50:21

-1

可能使用jQuery，當你將鼠標懸停在下拉列表中滾動？

       | 
          V 
<li class="leaf" onHover="$(this).scroll();"><a href="/content/jd-edwards-client" title="JD Edwards Client Services">JD Edwards</a></li>

來源

2013-05-13 22:50:47 Qvcool

我最終只是這樣做，它似乎工作。

$('#main-menu li').mouseenter(function() { 
    //make sure menu does not fly off the right of the screen 
    if ($(this).children('ul').offset().left + 200 > $(window).width()) {  
    $(this).children('ul').css('right', 180);   
    } 
});

來源

2013-05-14 19:00:15

防止CSS下拉菜單超出屏幕向右擴展

回答

相關問題