PrimeVue Menubar - css

Question

I created a drop down menu with menubar. However I have custumization problems :
The transparency is well done, but the size of the horizontal items is too hight (and so not vertically centered. The required height is thirty pixels all inclusive ;
(just resolved with height: 30px; in passive mode (neither hover nor seleted). The selection "Button" item in the horizontal menu remains too hight
The vertical menu items are too separated from each over and the width of the vertical menus too narow ;
The movement in the verticals menu items not be materialized (with a blue color) as it is in the horizontal menu;
Impossible to move to a submenu with a mouse. Only with keybord arrows. Why ?
I tried a long time the css with modification of the "theme.css" of the saga-blue theme, but nothing to do nothing works except the css lines included in my code :
Code:
.p-menubar {
background: transparent;
padding: 0;
height: 30px;
}
What are the particular css elements and clauses to modify ?

Answer 1

Eventually, using Chrome's inspector, I ended up discovering the CSS classes involved. By groping on the values I got about what I wanted.
The impacted code:
In the vue.js file:
<div id="menuU" class="user-menu" v-show="isvisible()">
<Menubar:model="items" class="p-menubar"></Menubar>
</div>
the v-show parameter is application specific and not given here.
In css:
.menu-utilisateur {
background-color: lightgrey;
height: 30px;
}
.p-menubar {
background-color: lightgrey;
padding: 0px;
height: 30px;
}
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.5rem 1rem !important;
}
.p-menubar .p-menuitem-link {
padding: 0.5rem 0.5rem !important;
}
Don't forget the !important. It overwrites the default values.