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

如果您嘗試使用引導導航欄，則還需要包含引導js文件：

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

看看這個矮人：

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

Answer 2

好的，我建議您將.dropdown-content更改為

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #282828;
  max-width: 100%;
  width: 100%;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

如果這不起作用，則始終可以執行<br>或<hr> ，但是應該可以。 請記住，某些瀏覽器（例如Chrome，Firefox和Opera）需要刷新CSS代碼才能加載更新的（或使用私有導航）：P

Answer 3

我不明白為什么你需要使用

class = "nav-item-align-left" 

每一次。 只需在您的CSS中編寫：

li {
  float: left;
}

在ul.nav中，刪除float：left; 因此，它看起來像：

ul.nav {
    width: 100%;
    list-style-type: none;
    margin: 0 0 1em 0;
    padding: 0;
    overflow: hidden;
    background-color: #282828;
}

在ul.nav li a中刪除ul.nav，這樣看起來

li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
    font-family: "SF UI Display Light", serif;
}

{...}而不是ul.nav li

將dropbtn和.dropdown-content中的顏色更改為白色