Getting Absolute behaviour without using absolute

I'm busy working on a Menu and I cant seem to get the correct alignments while using posistion: absolute; But it stretches my navigation bar if I dont.

It is going to be hard to display the Html as Wordpress generates the menus But I will try my best to get accross what the issue is.

.menu{
    display: flex;
    list-style: none;
}

*{
    font-family: 'Quicksand', sans-serif!important;
}

.j-c{
    justify-content: center;
}
.flex{
    display: flex;
}
.menu li{
    margin: 5px;
    padding: 5px;
    font-size: 15px;
    font-weight: 300;
    color:black;    
}
.menu *{
    color:black;
}

.logo{
    max-width: 100px;
    image-rendering: -webkit-optimize-contrast;
    margin-bottom:-25px;
}
.primary_menu{
    display: flex;
    align-items: center;
}

.j-c{
    background-color: white;
    box-shadow: grey 2px -1px 5px 0px;
    align-items: flex-end;
}

.sub-menu{
    display: none;
    list-style: none;
    padding-left:0px;

}

.sub-menu li{
    margin:0px;
    padding:0px;

}

.sub-menu *{
    color:#25A5D6!important;
}

.sub-menu hr{
    margin:2px;
}

#menu-item-30:hover{

}
#menu-item-30:hover .sub-menu{
    display: block;
    
}
<div class="flex j-c">
          <a href="http://localhost/mall-ads/"><img class="logo" src="http://localhost/mall-ads/wp-content/uploads/2021/06/Logo-1.png"></a>
          <div class="primary_menu"><ul id="menu-main" class="menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost/mall-ads/landing/">Home</a></li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://localhost/mall-ads/about/">About Us</a></li>
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost/mall-ads/audience/">Our Audience</a></li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30" style="
    /* position: absolute; */
"><a href="http://localhost/mall-ads/offerings/">Our Offerings</a>
<ul class="sub-menu">
    <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-51"><a href="http://localhost/mall-ads/offering/mall-tv/">MALL TV</a></li>
    <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#"><hr></a></li>
    <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-50"><a href="http://localhost/mall-ads/offering/mall-classic/">MALL CLASSIC</a></li>
    <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="#"><hr></a></li>
    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-49"><a href="http://localhost/mall-ads/offering/mall-active/">MALL ACTIVE</a></li>
    <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="#"><hr></a></li>
</ul>
</li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/mall-ads/footprint/">Our Footprint</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost/mall-ads/news/">News</a></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost/mall-ads/contact/">Contact Us</a></li>
</ul></div>    </div>

enter image description here

The Snippet is my current setup, The image the end result im looking for. So if you see im trying to get the hover effect to not move the menu but then to also not stretch out my menu bar(White block with box shadows) So that I can have a background on the menu item that then fills the sub-menu to creating the gray little box that is proportionate to one another.

How do I achieve this?

TLDR: I want to have my sub-menu have absolute posistisning(As not to stretch the entire menu bar) but for the menu item to still be proportionate to the sub-menu, Id need achieve this behaviour threw css as I cant change the HTML as its generated

1 answer

  • answered 2021-06-18 08:41 Chris Berlin

    you have to give the main-menu enough width for the submenu. If not, the width gets larger on hover and the main menu.

    Solution set a fixed width for main-menu-item

    .menu li{ 
            width:100px; 
            overflow-x:hidden
     }
    

    body{overflow-x:hidden}
    
    .menu{
        display: flex;
        list-style: none;
    }
    
    *{
        font-family: 'Quicksand', sans-serif!important;
    }
    
    .j-c{
        justify-content: center;
    }
    .flex{
        display: flex;
    }
    .menu li{
        margin: 5px;
        padding: 5px;
        font-size: 15px;
        font-weight: 300;
        color:black;    
        width:100px; 
        overflow-x:hidden
    }
    .menu *{
        color:black;
    }
    
    .logo{
        max-width: 100px;
        image-rendering: -webkit-optimize-contrast;
        margin-bottom:-25px;
    }
    .primary_menu{
        display: flex;
        align-items: center;
    }
    
    .j-c{
        background-color: white;
        box-shadow: grey 2px -1px 5px 0px;
        align-items: flex-end;
    }
    
    .sub-menu{
        display: none;
        list-style: none;
        padding-left:0px;
        max-width:100%;
        overflow:hidden;
    
    }
    
    .sub-menu li{
        margin:0px;
        padding:0px;
    
    }
    
    .sub-menu *{
        color:#25A5D6!important;
    }
    
    .sub-menu hr{
        margin:2px;
    }
    
    #menu-item-30:hover{
    
    }
    #menu-item-30:hover .sub-menu{
        display: block;
        
    }
    <div class="flex j-c">
              <a href="http://localhost/mall-ads/"><img class="logo" src="http://localhost/mall-ads/wp-content/uploads/2021/06/Logo-1.png"></a>
              <div class="primary_menu"><ul id="menu-main" class="menu"><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost/mall-ads/landing/">Home</a></li>
    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a href="http://localhost/mall-ads/about/">About Us</a></li>
    <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://localhost/mall-ads/audience/">Our Audience</a></li>
    <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30" style="
        /* position: absolute; */
    "><a href="http://localhost/mall-ads/offerings/">Our Offerings</a>
    <ul class="sub-menu">
        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-51"><a href="http://localhost/mall-ads/offering/mall-tv/">MALL TV</a></li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="#"><hr></a></li>
        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-50"><a href="http://localhost/mall-ads/offering/mall-classic/">MALL CLASSIC</a></li>
        <li id="menu-item-53" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="#"><hr></a></li>
        <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-offering menu-item-49"><a href="http://localhost/mall-ads/offering/mall-active/">MALL ACTIVE</a></li>
        <li id="menu-item-54" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-54"><a href="#"><hr></a></li>
    </ul>
    </li>
    <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://localhost/mall-ads/footprint/">Our Footprint</a></li>
    <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost/mall-ads/news/">News</a></li>
    <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="http://localhost/mall-ads/contact/">Contact Us</a></li>
    </ul></div>    </div>