Problems with css menu styles - css

Question

I am really new to working on this, the problem I have is two
What I am trying to do is give it to show the menu as shown in the following image:
I can not put the option that was selected underlined, and so that the displayed menu is horizontal, what I have is this:
Searching the web I have not found anything to solve it or something to take an example to solve my problem, I am working with CSS and Vue.Js, if someone can tell me how to solve this
Underline the selected menu and see the menu displayed horizontally
My Code:
<div class="panel-group" id="accordion-mbl-menu">
<div class="panel">
<b-navbar-toggle target="collapse-cat-lvl1-469">
Accesorios
<img src="#/assets/images/layout/menu/chevron.svg" class="icon">
</b-navbar-toggle>
<div style="background-color:white;">
<b-collapse id="collapse-cat-lvl1-469">
<div data-cat-acc="473" class="grid-item parent-lvl-2">
<a class="link -1 grid-sty-1" href="#" target="_self" data-menu-item-id="473">
<span class="text">GTI</span>
</a>
</div>
...
(other menu options)
...
</b-collapse>
</div>
</div>
<div class="panel">
<button type="button" class="navbar-toggler collapsed"> ¿Necesitas ayuda? </button>
</div>
</div>
My code CSS
#media (max-width: 828px) {
#menu-header.show {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#menu-header {
display: block ;
position: fixed;
z-index: 1;
background-color: #FFF;
left: 0;
top: 100px;
height: -webkit-calc(100% - 50px);
height: -moz-calc(100% - 50px);
height: calc(100% - 50px);
width: 90%;
padding: 20px 20px;
max-width: 87.5%;
transform: translateX(-100%);
transition: transform 650ms ease;
.grid-sty-1 {
height: 55px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-box-align: center;
align-items: center;
height: 40px;
font-size: 16px;
font-family: "VWHead-Bold", sans-serif;
position: relative;
a{
text-decoration: none;
outline: none !important;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
> .text {
padding-left: 15px;
color: #001E50;
}
}
.navbar-greetings{
font-family: 'VWHead-Regular';
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;
color: #001E50;
}
#accordion-mbl-menu {
margin: 0;
.panel {
box-shadow: none !important;
background-color: transparent;
border-radius: 0;
border: 0;
margin-bottom: 0;
> button.collapsed {
color: #001e50;
> .icon{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
> button.not-collapsed > .icon {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
> button {
margin: 0px;
padding: 0px;
width: 100%;
height: 55px;
font-size: 20px;
font-family: "VWHead-Bold";
font-weight: normal;
color: #2f3538;
text-decoration: none;
outline: none !important;
border-bottom: 1px solid #dee1e3;
padding-right: 15px;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
> .icon {
width: 20px;
height: 20px;
fill: currentColor;
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
position: absolute;
right: 15px;
top: auto;
}
.collapse.in {
display: block;
}
}
}
}
}
}
Any way to style this?

Answer 1

To show underline on hover
.class:hover {
text-decoration: underline;
}
To display horizontal
.container {
display: flex;
flex-direction: row;
}