flexNav.js子菜单偏离中心

Question

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

该插件有效，但是当我添加子菜单时，它们没有正确地居中于其父级下方。

Heres a 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/

Answer 2

如果您没有为Padding声明一个值，那么大多数Web浏览器默认会在您的UL元素中添加Padding，在您的UL上设置padding:0应该可以解决您的问题。

使用良好的CSS重置来防止将来出现这类问题：http://meyerweb.com/eric/tools/css/reset/

演示：http://jsfiddle.net/5m7r5848/4/