Change hover color for single navigation items

I have a verebb custom navigation bar. But I have a lot of problems with it and would appreciate any help or hints!

Each of my items has a different color and also changes the color when hovering over it.
1. Unfortunately I don’t seem to be able to add the hovering effects for the sub-menu items and
2. when moving the mouse to a sub-menu item, the hovering color disappears and gets replaced by the default hovering color from the vantage theme.
3. the sub-menu items are not displayed in individual rows but rather squeezed together in 2 rows
4. there is a lot of white space on the left and right side of the nabber, how can I remove this?

Thank you so much for any help! Here is my css code for the navigation. I experimented a little bit..

#search-icon #search-icon-icon:hover {
    background-color: #e4805a !important;
}
.startseite {
    background-color: #f0a55d;
    width: calc(4% - 3px);
}
.main-navigation .startseite:hover > a {
    background-color: #e4805a;
}
.verlag{
    background-color: #aa819a;
    width: calc(24% - 3px);
}
.verlag ul.sub-menu {
    background-color: #aa819a;
    width: 100%;
    text-align: center;
    font-size: 0.75em;
}
.main-navigation .verlag:hover {
    background-color: #745768;
}
.main-navigation .verlag ul.sub-menu:hover {
    background-color: #745768;
}
.handel {
    background-color: #94a9cd;
    width: calc(24% - 3px);
}
.handel ul.sub-menu {
    background-color: #94a9cd;
    text-align: center;
    font-size: 0.75em;
    width: 100%;
}
.main-navigation .handel:hover, .handel.sub-menu:hover {
    background-color: #2a6a9f;
}
.schulen {
    background-color: #e07c70;
    width: calc(24% - 3px);
}
.schulen ul.sub-menu {
    background-color: #e07c70;
    text-align: center;
    font-size: 0.75em;
    width: 100%;
}
.main-navigation .schulen:hover{
    background-color: #a4443a;
}
.buecher {
    background-color: #a2ca6b;
    width: calc(24% - 3px);
}
.buecher ul.sub-menu {
    background-color: #a2ca6b;
    text-align: center;
    font-size: 0.75em;
    width: 100%;
}
.main-navigation .buecher:hover {
    background-color: #698b44;
}

(Bücher, schulen, Handel, Verlag are custom css classes for the menu items)