1
Ich versuche, eine Navbar mit Mega-Menü und normalen Menü aber das Problem ist in meinem Mega-Menü Ich will die li und alle Element zusammen angezeigt werden, aber in der normalen Menü möchte ich Das ul Element wird nur angezeigt, wenn li schwebt.Dual Normal und Mega Menü
Und ich kann nicht verwalten die CSS des ersten zu vermeiden stören die zweite:
html,body,nav, ul, li, a, span{
margin:0; padding:0;
}
body{
font-family:helvetica;
font-size:16px;
}
nav ul {
background-color:#444;
display:flex;
flex-direction:column;
}
nav ul li{
list-style-type: none;
}
nav ul li a{
padding:.8rem 1rem;
display:block;
text-decoration: none;
color:#f9f9f9;
}
nav ul li:hover{
background:rgba(0,0,0, .25);
}
nav ul li:hover div.sf-mega {
top: 100%;
}
nav div.sf-mega ul {
width: 25%;
margin-bottom: 40px;
color: #000;
box-shadow: none;
}
nav div.sf-mega h4 {
margin-bottom: 15px;
text-transform: uppercase;
}
nav div.sf-mega ul li {
display: block;
}
nav div.sf-mega ul li a {
margin-top: 10px;
transition: 0.5s;
color: #000;
}
nav div.sf-mega ul li a:hover {
color: #4096ee;
}
@media only screen and (max-width:480px){
.has_children ul li a{
padding-left:2rem;
}
.has_children ul .has_children ul a{
padding-left:3rem;
}
.arrow-down::after{
content:"\f107";
}
}
@media only screen and (min-width:480px){
nav ul{
flex-direction:row;
}
nav ul li{
position:relative;
flex:1 0 auto;
text-align:left;
}
.has_children ul, .has_children ul .has_children ul{
display:none;
width:100%;
position:absolute;
}
.has_children ul .has_children ul{
left:100%;
top:0;
}
nav ul li:hover ul, .has_children ul .has_children:hover ul{
display:flex;
flex-direction:column;
}
}<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Menu supérieur">
<ul id="top-menu" class="menu"><li a="" id="nav-menu-item-2105" class="main-menu-item menu-first menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children mega2"><a href="http://localhost/wordpress/commande/" class="menu-link main-menu-link"><span>Commande</span></a><div class="sf-mega"><div class="sf-mega-inner clearfix">
<ul class="navi first menu-depth-1">
\t <li a="" id="nav-menu-item-2106" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a>
\t <ul class="navi navi menu-depth-2">
\t \t <li a="" id="nav-menu-item-2107" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link sub-menu-link"><span>Boutique</span></a></li>
\t \t <li a="" id="nav-menu-item-2108" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/blog/" class="menu-link sub-menu-link"><span>Blog</span></a></li>
\t \t <li a="" id="nav-menu-item-2109" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-markup-and-formatting/" class="menu-link sub-menu-link"><span>Page Markup And Formatting</span></a></li>
\t </ul>
</li>
\t <li a="" id="nav-menu-item-2113" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/panier/" class="menu-link sub-menu-link"><span>Panier</span></a>
\t <ul class="navi navi menu-depth-2">
\t \t <li a="" id="nav-menu-item-2112" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3a/" class="menu-link sub-menu-link"><span>Level 3a</span></a></li>
\t \t <li a="" id="nav-menu-item-2111" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/level-1/level-2/level-3b/" class="menu-link sub-menu-link"><span>Level 3b</span></a></li>
\t \t <li a="" id="nav-menu-item-2110" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/about/page-image-alignment/" class="menu-link sub-menu-link"><span>Page Image Alignment</span></a></li>
\t </ul>
</li>
</ul>
</div></div></li>
<li a="" id="nav-menu-item-2114" class="main-menu-item menu-item-depth-0 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/boutique/" class="menu-link main-menu-link"><span>Boutique</span></a>
<ul class="navi first menu-depth-1">
\t <li a="" id="nav-menu-item-2115" class=" menu-item-depth-1 menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_children normal_menu_item"><a href="http://localhost/wordpress/page-d-exemple/" class="menu-link sub-menu-link"><span>Page d’exemple</span></a>
\t <ul class="navi navi menu-depth-2">
\t \t <li a="" id="nav-menu-item-2116" class=" navi menu-item-depth-2 menu-item menu-item-type-post_type menu-item-object-page normal_menu_item"><a href="http://localhost/wordpress/page-b/" class="menu-link sub-menu-link"><span>Page B</span></a></li>
\t </ul>
</li>
</ul>
</li>
</ul>
</nav>klar zu sein, ich versuche, ein Mega-Menü für commande zu haben und ein normales Menü für Boutique.
Um ehrlich zu sein, es ist wirklich schwer zu verstehen, was Sie zu tun versuchen. Kannst du deine Frage etwas umschreiben? –
@ Dejan.S Ich versuche am Ende zusammenzufassen. –
Und was ist das Problem mit Ihrem Menü, das Sie haben? Für mich scheint es so, als würde es funktionieren wie erwartet. Du schwebst auf "commande", es fällt runter, du schwebst auf panier, es dehnt sich auf die nächste Ebene aus. Also, was ist das Problem –