jQuery FlexNav 子菜单迷失在视口后面答案

【问题标题】：jQuery FlexNav sub-menus get lost behind the viewportjQuery FlexNav 子菜单迷失在视口后面
【发布时间】：2014-04-01 05:34:42
【问题描述】：

如何让FlexNav子菜单在左侧打开？

我有多级菜单和最后一个菜单项的低级子菜单在浏览器（桌面）窗口右侧丢失。这是 FlexNav 的缺点吗？它可以通过某种方式修复吗？也许有任何选择，虽然我没有设法找到它。

这是 FlexNav 的演示，最后一个菜单项下只有一个 sum-menu。如果您嵌套额外的级别，它们会飞出，但其中一部分只是隐藏在视口之外，因为它们无法适应窗口大小，这也会创建水平滚动条。

http://jasonweaver.name/lab/flexiblenavigation/

代码示例：

<!DOCTYPE html><!--[if IE 7]>
<html lang="en" class="ie7 oldie"></html><![endif]--><!--[if IE 8]>
<html lang="en" class="ie8 oldie"></html><![endif]-->
<!-- [if gt IE 8] <!-->
<html lang="en">
  <!-- <![endif]-->
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexNav - A jQuery Plugin for Responsive Menus</title>
    <link href="http://jasonweaver.name/lab/flexiblenavigation/css/flexnav.css" media="screen, projection" rel="stylesheet" type="text/css">
    <link href="http://jasonweaver.name/lab/flexiblenavigation/css/page.css" media="screen, projection" rel="stylesheet" type="text/css">
  </head>
  <body class="home-page">
        <div class="menu-button">Menu</div>
        <nav>
          <ul data-breakpoint="800" class="flexnav">
            <li><a href="">Item 1</a>
              <ul>
                <li> <a href="/">Sub 1 Item 1</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a></li>
                    <li><a href="/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="/">Sub 1 Item 2</a></li>
                <li><a href="/">Sub 1 Item 3</a></li>
                <li><a href="/">Sub 1 Item 4</a></li>
              </ul>
            </li>
            <li><a href="">Item 2</a></li>
            <li><a href="/">Item 3</a></li>
            <li><a href="">Item 4</a></li>
            <li><a href="/">Item 5</a>
              <ul>
                <li><a href="/">Sub 1 Item 1</a></li>
                <li><a href="/">Sub 1 Item 2</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a></li>
                    <li><a href="/">Sub 2 Item 3</a></li>
                  </ul>
                </li>
                <li><a href="/">Sub 1 Item 3</a>
                  <ul>
                    <li><a href="/">Sub 2 Item 1</a></li>
                    <li><a href="/">Sub 2 Item 2</a>
                      <ul>
                        <li><a href="/">Sub 3 Item 1</a></li>
                        <li><a href="/">Sub 3 Item 2</a></li>
                        <li><a href="/">Sub 3 Item 3</a>
                          <ul>
                            <li><a href="/">Sub 4 Item 1</a></li>
                            <li><a href="/">Sub 4 Item 2</a></li>
                            <li><a href="/">Sub 4 Item 3</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://jasonweaver.name/lab/flexiblenavigation/js/jquery.flexnav.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {            
            // initialize FlexNav
            $(".flexnav").flexNav();
        });
    </script>
  </body>
</html>

Fiddle

【问题讨论】：

请提供您的代码，以便我们为您提供帮助。

标签： jquery html css jquery-plugins

【解决方案1】：

你可以通过两种方式解决这个问题（不使用 javascript）

为最后一个菜单项添加一个类，然后添加以下代码Fiddle
```
.flex li.last ul li > ul{
    margin-left: 0px; left: -100%;
}
```
您可以使用 css3 伪选择器 last-child (note: that this is not supported in all browsers) Fiddle
```
.flexnav li:last-child ul li > ul{
    margin-left: 0px; left: -100%;
}
```

【讨论】：