为什么我的导航在使用 Fullpage.js 时不是垂直的？

Question

我相信我已经正确地遵循了文档，但是，即使我选择了垂直导航，导航似乎仍停留在水平格式。

我将在下面 post 我的代码，但这里是 live version。

HTML

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

JS

<script>
    $(document).ready(function () {
        $('#fullpage').fullpage({
            css3: true,
            navigation: true,
            navigationPosition: 'right',
            keyboardScrolling: true,
            controlArrows: true
        });
    });
</script>

CSS 是从我没有触及的 source files 中提取的，它在我的样式表之后，因此应该没有最重要的问题。控制台日志没有显示任何问题。

我还注意到第一个导航点的右侧填充较多。

Answer 1

"style.css" 与 "jquery.fullPage.css".
有冲突

Answer 2

我的样式表中的非特定 li 和 ul 似乎覆盖了 fullpage.js 样式表。例如，当我用 .divName li:hover 替换我的 li:hover 时，它解决了问题。

有一件事让我感到困惑，这是怎么发生的，特别是因为 DOM 最后读取了 fullpage.css 文件。

为什么我的导航在使用 Fullpage.js 时不是垂直的？

Why is my navigation not vertical when using Fullpage.js?

html

css

jquery

fullpage.js