Problems with css styles - css

Question

I'm working on styling my menu, but I can't get the format I expect, I don't really know what I'm doing wrong, I'm new to this
.customHorizontalList {
list-style: none;
display: flex;
flex-direction: row;
}
.customHorizontalList>li {
margin-right: 1rem;
}
.divmenu{
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
background-color: white;
font:400 20px/20px sans-serif;
}
.ButtonsMenu{
color: white;
background-color: #001e50;
border:none;
font-family: 'VWHead-Bold';
font-size: 13px;
}
.textTitleSubMenu {
padding-left: 12px;
color: #000000;
font-size: 17px;
font-family: "VWText-Regular";
}
.textSubMenu{
padding-left: 12px;
color: #001e50;
font-size: 15px;
font-family: "VWText-Regular";
}
<div class="scroll-wrapper scrollbar-outer" style="position: relative;">
<div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
<div class="panel-group" id="accordion-mbl-menu">
<!-- ===Menu Desktop=== -->
<div id="app" class="large">
<b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accesorios</b-button>
<b-collapse id="collapse-1" class="mt-2">
<ul class="customHorizontalList">
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
</ul>
</b-collapse>
</div>
Searching the web I tried to fix the problem but so far nothing has worked
I look for this:
I have until now this:
Dropdown menu (white) must be exactly below Div (blue)
The drop-down menu that covers the entire width of the screen
The upper buttons have to be fixed, when I press one the whole main menu moves
the selected menu must be underlined
any help or recommendation?

Answer 1

This can be created using CSS Grid. I will give an example code snippet below.
This styling isn't designed for you to just copy/paste into your project, but rather show you how powerful CSS grid is (It's easy to make completely mobile-responsive as well!)
If you are interested, here is a Youtube video you can watch that I personally found helpful. When getting to learn CSS Grid.
header {
display: grid;
grid-template-columns: repeat(10, 1fr);
background: #001E50;
padding: 20px;
border: 4px solid #C85171;
margin-bottom: 2em;
align-content: center;
}
header > * {
color: white;
}
#b1 {
grid-column: -3/-2;
}
main {
display: grid;
grid-template-columns: repeat(4, 2fr) repeat(2, 1fr);
}
main > * {
width: 100px;
height: 100px;
background: red;
}
<header>
<div id="n1">Lorem Ipsum</div>
<div id="n2">Lorem Ipsum</div>
<div id="n3">Lorem Ipsum</div>
<div id="n4">Lorem Ipsum</div>
<button id="b1"></button>
<button id="b2"></button>
</header>
<main>
<div id="m1"></div>
<div id="m2"></div>
<div id="m3"></div>
<div id="m4"></div>
</main>