jQuery FlexNav子菜单在视口后面丢失_Jquery_Html_Css_Jquery Plugins

jQuery FlexNav子菜单在视口后面丢失

jquery html css jquery-plugins

jQuery FlexNav子菜单在视口后面丢失,jquery,html,css,jquery-plugins,Jquery,Html,Css,Jquery Plugins,如何使FlexNav子菜单在左侧打开最后一个菜单项的多级菜单和低级子菜单在浏览器（桌面）窗口的右侧丢失。这是FlexNav的缺点吗？有什么办法可以解决吗？也许有任何选择，尽管我没有找到它这里是FlexNav的演示，在最后一个菜单项下只有一个sum菜单。如果嵌套其他标高，它们会飞出，但其中的一部分会隐藏在视口之外，因为它们无法适应窗口大小，这也会创建水平滚动条代码示例： <!DOCTYPE html><!--[if IE 7]> <html lang="e

如何使FlexNav子菜单在左侧打开

最后一个菜单项的多级菜单和低级子菜单在浏览器（桌面）窗口的右侧丢失。这是FlexNav的缺点吗？有什么办法可以解决吗？也许有任何选择，尽管我没有找到它

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

代码示例：

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


FlexNav-一个用于响应菜单的jQuery插件
菜单

















































jQuery（文档）.ready（函数（$）{
//初始化FlexNav
$（“.flexnav”）.flexnav（）；
});

您可以通过两种方式解决此问题（无需使用javascript）

在最后一个菜单项中添加一个类，然后添加以下代码

您可以使用css3 psuedo选择器的最后一个子项（）

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

.flex li.last ul li > ul{
    margin-left: 0px; left: -100%;
}

.flexnav li:last-child ul li > ul{
    margin-left: 0px; left: -100%;
}