jquery - flexNav.js 子菜单偏离中心

Question

我想使用 Flex Navigation用于创建响应式菜单的插件。

该插件可以工作，但是当我添加子菜单时，它们没有正确地居中放置在它们的父项之下。

Heres a fiddle

它在 fiddle 中并不完全有效，我不确定为什么，但您仍然可以看到我正在谈论的偏心子菜单。

这是一个屏幕截图来说明我所看到的。

这是我的 HTML

    <div class="small-12 large-8 columns navHolder">
        <div class="menu-button">Menu</div>
        <ul class="flexnav with-js opacity sm-screen flexnav-show" data-breakpoint="1025">
            <li class="navOption"><a href="#">Nav 1</a></li>
            <li class="navOption"><a href="#">Nav 2</a></li>
            <li class="navOption"><a href="#">Nav 3</a>
            <ul>
                <li class="nav-list"><a href="#">Submenu 1</a></li>
                <li class="nav-list"><a href="#">Submenu 2</a></li>
            </ul>
            </li>
            <li class="navOption"><a href="#">Nav 4</a></li>
        </ul>            
    </div>

我没有更改任何 CSS 插件，但这是我自己的样式表中的自定义内容

/*Header*/
#mainLogo{
    margin-top:20px;
}

.loginSignUpButtons p{
    margin-top:20px;
}


/*FlexNav*/
.navHolder{
    margin-top:20px;
}

Answer 1

子菜单有填充，删除它:

.navOption ul {padding:0}

http://jsfiddle.net/2d0q03t3/