HTML/CSS 导航栏下拉列表不以列表格式显示

Question

http://codepen.io/josterberg/pen/LxEZMy

<header>
        <nav>
            <ul class="nav" id="navigationBar">
                <li class="nav-item-align-left"><a class="active" href="index.html">Home</a></li>
                <li class="nav-item-align-left"><a class="active" href="page2.html">Page 2</a></li>
                <li class="nav-item-align-left"><a class="active" href="page3.html">Page 3</a></li>
                <li class="nav-item-align-left dropdown">
                    <a class="dropbtn">Account</a>
                    <div class="dropdown-content">
                        <a href="#">Settings</a>
                        <a href="#">Logout</a>
                    </div>
                </li>
                <li class="icon">
                    <a href="javascript:void(0);" style="font-size:15px;" onclick="toggleResponsiveNav()">☰</a>
                </li>
            </ul>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
            <script src="js/all.js"></script>
            <script src="js/main.js"></script>
        </nav>
    </header>

如您所见，我的帐户下拉菜单并没有向下，而是向左。我应该在我的 CSS 中修改什么来改变这种行为，使我的下拉菜单向下而不是向左？

Answer 1

如果您尝试使用 bootstrap 导航栏，您还需要包含 bootstrap js 文件:

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

看看这个 plunker:

http://embed.plnkr.co/kfUPcF/