HTML/CSS導航欄下拉菜單不以列表格式

http://codepen.io/josterberg/pen/LxEZMy HTML/CSS導航欄下拉菜單不以列表格式

<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>

正如你看到的，我的帳戶下拉列表中沒有downward--它會向左側會顯示。我應該修改我的CSS中的哪些內容，以改變這種行爲，讓我的下降而不是左側？

來源

2017-01-05 Jordan Osterberg

使用顯示器的顏色！阻止重要的; on .dropdown-content a {}您的ul.nav li a將顯示設置爲內聯; – Bosc

@Bosc謝謝你！這工作！ –

@Jordan我強烈不鼓勵使用'！important'，因爲它旨在被_user_樣式表使用，以覆蓋網站樣式。而不是使用！important，使選擇器更具體，以便覆蓋'display：inline' - 例如，我添加了'.nav li.dropdown：hover .dropdown-content a {display：block;並且工作。 –

如果你要使用引導導航欄，你需要包括引導js文件，以及：

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

看看這個plunker：

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

來源

2017-01-05 00:20:19 Yaser

我沒有使用bootstrap，看看codepen CSS。 –

@JordanOsterberg如果您未使用引導，那麼定義的toggleResponsiveNav函數是什麼？ – Yaser

哎呀！忘了將其添加到codepen，請立即檢查。 –

好吧，我建議您將.dropdown內容更改爲

.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

來源

2017-01-05 00:43:13

我不知道爲什麼你需要使用

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李一刪除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李一{...}

變化dropbtn和.dropdown內容到白

來源

2017-01-05 02:00:40 utopia

在實際項目中的一些元素中，我使用了這些類。我修改了代碼以使其具有通用性，並且不受此項目限制。 –

@JordanOsterberg好的，如果你願意，你可以在你的代碼中使用它。然後就像我上面描述的那樣改變其餘部分。因爲它不是很好，或強烈建議使用！重要 – utopia

HTML/CSS導航欄下拉菜單不以列表格式

回答

相關問題