防止 CSS 下拉菜单向右延伸到屏幕之外答案

【问题标题】：Prevent CSS drop-down menu from extending beyond screen to the right防止 CSS 下拉菜单向右延伸到屏幕之外
【发布时间】：2013-05-08 02:19:36
【问题描述】：

我的网站标题中有一个横向 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）？此外，这是一个 Intranet 应用程序，所以很遗憾我无法将您发送到演示。哦，我确实可以访问外部 CSS 文件，所以我可以添加额外的 CSS，我只是不能添加/编辑菜单本身的 ID 和类。

谢谢

【问题讨论】：

标签： jquery css drop-down-menu menu flyout

【解决方案1】：

当您将鼠标悬停在下拉菜单上时可能使用 jQuery 滚动？

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

【讨论】：

【解决方案2】：

我最终只是这样做了，它似乎有效。

$('#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);          
  } 
});

【讨论】：