下拉菜單樣式的CSS菜單

Question

我正在爲剛剛創業的朋友製作這個簡單的工作列表/客戶端/股票管理平臺。

它正在建立在HTML，PHP和CSS。

我面臨的問題是頁面C​​SS。 子菜單的寬度正在縮小，無法更改。 該菜單是基於w3schools的例子，在這裏和那裏我發現googling/SO搜索。但找不到原因和如何解決我的問題。

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #003366; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #0066CC; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
    border-right: 1px solid #bbb; 
 
} 
 

 
li.right { 
 
    float: right; 
 
} 
 

 
.arrow { 
 
    font-size: 8px; 
 
    line-height: 0%; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!-- Header --> 
 
<header id="header"> 
 
    <nav id="nav"> 
 
    <ul> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Pedidos de Reparação</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Cliente</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Stock</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="right"><a href="#">Deltronic</a></li> 
 

 
    </ul> 
 
    </nav> 
 
</header> 
 
<!-- Header --> 
 

 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p>

我已設置jsfiddle例子爲好。

希望有人能幫助我理解爲什麼它會發生這樣的事情，並最終實現我所追求的結果。

Answer 1

如果我正確理解你，你不希望下拉菜單的內容包裝成兩行。

要做到這一點，只需添加white-space: nowrap;的規則dropdown-content a：

body { 
 
    margin: 0; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #003366; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
li a, 
 
.dropbtn { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover, 
 
.dropdown:hover .dropbtn { 
 
    background-color: #0066CC; 
 
} 
 

 
li.dropdown { 
 
    display: inline-block; 
 
    border-right: 1px solid #bbb; 
 
} 
 

 
li.right { 
 
    float: right; 
 
} 
 

 
.arrow { 
 
    font-size: 8px; 
 
    line-height: 0%; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    white-space: nowrap; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<!-- Header --> 
 
<header id="header"> 
 
    <nav id="nav"> 
 
    <ul> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Reparações <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Pedidos de Reparação</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Clientes <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Cliente</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropbtn">Stocks <span class="arrow">&#9660;</span></a> 
 
     <div class="dropdown-content"> 
 
      <a href="#">Adicionar Stock</a> 
 
     </div> 
 
     </li> 
 

 
     <li class="right"><a href="#">Deltronic</a></li> 
 

 
    </ul> 
 
    </nav> 
 
</header> 
 
<!-- Header --> 
 

 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p> 
 
<p> weeeeeeeeeee </p>

Answer 2

你可能已經比較了W3Schools的到你的CSS文件。然後你會注意到你已經將position: relative;添加到了你的li元素中。這正是你問題的原因。

li { 
    display: inline-block; 
    position: relative; // This is what's causing the problem 
    float: left; 
} 

除非有任何具體的變更原因，否則只要擺脫它，你就可以走了。