CSS-Untermenü-Optionen - nicht richtig positioniert

Question

Ich habe ein Tutorial online für eine responsive Website gefunden, aber ich möchte das Menü, das es bietet, in ein Untermenü Dropdown für bestimmte Elemente ändern. Wenn ich eine hinzufügen wollte, werden die Untermenüpunkte korrekt angezeigt, aber nicht richtig positioniert. Hier

ist der Code:

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

Hier ist die JSFiddle.

Wie bekomme ich es so, dass die zwei Test-Untermenüpunkte unter den Diensten positioniert sind, zentriert wie die Dienste, und untereinander?

Answer 1

Fügen Sie diese die <li> Elemente erhalten vertikal zu stapeln:

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

auch standardmäßig wird ein <ul> eingerückt werden. Fügen Sie diese auf .mainheader nav ul ul die Ausrichtung zu beheben:

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

sehen: https://jsfiddle.net/wynLsuwa/3/.

Answer 2

diese beiden Regeln hinzufügen:

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

Fiddle: https://jsfiddle.net/c19hku1o/1/

Answer 3

Ich nehme an, die unten ist, was Sie erreichen wollen?

Hinweis:

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

Und:

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