I am trying to make a navbar with mega menu and normal menu
but the problem is in my mega menu I want the li and all the ul element to be display together but in the normal menu I want the ul element display only if the li is hover.
And I can't manage to avoid the css of the first one interfere with the second one:
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">
<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>
<ul class="navi navi menu-depth-2">
<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>
<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>
<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>
</ul>
</li>
<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>
<ul class="navi navi menu-depth-2">
<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>
<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>
<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>
</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">
<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>
<ul class="navi navi menu-depth-2">
<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>
</ul>
</li>
</ul>
</li>
</ul>
</nav>To be clear I try to have a mega menu for commande and a normal menu for Boutique.
Maybe you may want to rewrite the styles to keep the mega menu and the normal menu styles separate, but I have done some debugging and added the below to
min-width:480pxmedia query to show the mega menu in the desktop view on hover:See demo below: