CSS子菜單項 - 未正確定位

我在網上找到了一個響應式網站教程，但我想將其提供的菜單更改爲子菜單下拉菜單中的特定項目。當我嘗試添加一個時，它會正確顯示子菜單項，但不能正確定位它們。CSS子菜單項 - 未正確定位

下面是代碼：

.mainheader nav { 
 
    background-color: #666; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 
.mainheader nav ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
.mainheader nav ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 
.mainheader nav ul li:hover ul { 
 
    background-color: #666; 
 
    visibility: visible; 
 
} 
 
.mainheader nav ul li { 
 
    float: left; 
 
    display: inline; 
 
} 
 
.mainheader nav a:link, 
 
.mainheader nav a:visited { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    padding: 10px 25px; 
 
    height: 20px; 
 
} 
 
.mainheader nav a:hover, 
 
.mainheader nav a:active, 
 
.mainheader nav .active a:link, 
 
.mainheader nav .active a:visited { 
 
    background-color: #CF5C3F; 
 
    text-shadow: none; 
 
} 
 
.mainheader nav ul li a { 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
}

<header class="mainheader"> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

這裏是JSFiddle。

我該如何得到它，這樣兩個測試子菜單項位於服務之下，以服務爲中心，在彼此之下？

來源

2016-09-27 Morgan Klaif

[這樣]（https://jsfiddle.net/wynLsuwa/2/）或[像這樣]（https://jsfiddle.net/wynLsuwa/4/）？ – Pete

添加此得到<li>元素垂直堆疊：

.mainheader nav ul ul li { 
    clear: both; 
}

此外，在默認情況下，一個<ul>就被縮進。這種加入.mainheader nav ul ul固定取向：

padding: 0; 
list-style-type: none;

看到這個：https://jsfiddle.net/wynLsuwa/3/。

來源

2016-09-27 14:07:03 woz

謝謝。完美工作。我會盡快接受答案！ –

另一件事......你知道如何製作它，因此當它處於移動模式時，它會將其餘的內容壓下來嗎？請參閱：https://jsfiddle.net/h5kead8z/ –

在StackOverflow上，通常最好針對每個問題發佈一個新問題，以便爲將來可能會遇到類似問題的用戶提供最大的可搜索性和可讀性。 – woz

添加這兩個規則：

.mainheader nav ul li ul { 
    padding: 0; 
    min-width: 110px; 
} 
.mainheader nav ul li ul li { 
    float: none; 
    display: block; 
    text-align: left; 
}

小提琴：https://jsfiddle.net/c19hku1o/1/

來源

2016-09-27 14:12:30 Johannes

我假設下面你想達到什麼樣的？

注：

.mainheader nav ul ul { 
    left: 0; 
    width: 100%; 
}

和：

.mainheader nav ul li { 
    position: relative; 
}

.mainheader nav { 
 
    background-color: #666; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 
.mainheader nav ul { 
 
    list-style: none; 
 
    margin: 0 auto; 
 
} 
 
.mainheader nav ul ul { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.mainheader nav ul li:hover ul { 
 
    background-color: #666; 
 
    visibility: visible; 
 
} 
 
.mainheader nav ul li { 
 
    float: left; 
 
    display: inline; 
 
    position: relative; 
 
} 
 
.mainheader nav a:link, 
 
.mainheader nav a:visited { 
 
    color: #FFF; 
 
    display: inline-block; 
 
    padding: 10px 25px; 
 
    height: 20px; 
 
} 
 
.mainheader nav a:hover, 
 
.mainheader nav a:active, 
 
.mainheader nav .active a:link, 
 
.mainheader nav .active a:visited { 
 
    background-color: #CF5C3F; 
 
    text-shadow: none; 
 
} 
 
.mainheader nav ul li a { 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
}

<header class="mainheader"> 
 
    <nav> 
 
    <ul> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">Services</a> 
 
     <ul> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
      <li><a href="#">Test</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

來源

2016-09-27 14:12:33 Tom

CSS子菜單項 - 未正確定位

回答

相關問題