Zentriertes CSS-Menü mit Untermenü

Question

Ich möchte ein zentriertes CSS-Menü mit Untermenü haben. Ich könnte einen Teil davon machen (Hauptmenü), aber ich habe Probleme beim Anzeigen des Untermenüs. Wenn ich Hauptmenüpunkte schweben ihr Untermenü zu zeigen, Problem beginnt ...

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { 
 
    height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 10px 6px 10px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
.submenu { 
 
    display:none; 
 
    position:absolute; 
 
    top: 5px; 
 
    width: 200px; 
 
    background:white; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

https://jsfiddle.net/e8wyp6et/1/

Haben Sie eine Idee?

Answer 1

Sie haben position: relative; im Untermenü des haben am nächsten Elternteil und left: 0; auf der .submenu Selektor:

In Ihrer Frage wurde es zu der #menu ul hinzugefügt, die das Untermenü relativ dazu positioniert.

#menu ul li { 
    position: relative; 
} 

und

.submenu { 
    display:none; 
    position:absolute; 
    top: 5px; 
    left: 0; /*this is needed to tell the submenu to align to the left of li*/ 
    width: 200px; 
    background:white; 
} 

https://jsfiddle.net/Kyle_/e8wyp6et/2/

Answer 2

Try this:

.submenu die CSS für Ihre ul Ihr Ziel erhalten die .submenu von #menu ul li > .submenu und fügen position:relative zu li

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline; 
 
    position: relative; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 10px 6px 10px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
#menu ul li > .submenu { 
 
    display:none; 
 
    position:absolute; 
 
    top: 24px; 
 
    width: 200px; 
 
    background:white; 
 
    left:0; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>

Answer 3

Geben position: relative-li und nicht zu ul

Updated code

Answer 4

Ihre submenu propert Diese werden außer Kraft gesetzt und die display: inline verursacht hier Probleme.

Auch Ihre ul li a Code wirkt sich die li a innerhalb submenu

mit folgenden Änderungen am Code Versuchen:

* { 
 
    font-family:arial; 
 
} 
 

 
#menu { 
 
    height: 65px; 
 
    background: #f3f3f3; 
 
    text-align: center; 
 
} 
 

 
#menu ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: 15px 
 
} 
 

 
#menu ul li { 
 
    list-style: none; 
 
    text-align: center; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
#menu ul li a { 
 
    padding: 4px 30px 6px 30px; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    color: #666; 
 
    transition: all 0.3s; 
 
} 
 

 
.submenu li a { 
 
    padding: 10px 0 !important; 
 
} 
 

 
#menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active { 
 
    background: #58c071; 
 
    color: white; 
 
} 
 

 
.submenu { 
 
    display:none; 
 
    width: 120px; 
 
    background: white; 
 
} 
 

 
#menu li:hover > ul { 
 
    display: block 
 
}

<div id="menu" class="text-center"> 
 
    <ul> 
 
    <li><a href="">Home</a></li> 
 
    <li><a href="">Products</a> 
 
     <ul class="submenu"> 
 
     <li><a href="">Product 1</a></li> 
 
     <li><a href="">Product 2</a></li> 
 
     <li><a href="">Product 3</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="">Contact</a></li> 
 
    </ul> 
 
</div>