The top navigation bar display is created using CSS and menus are loaded dynamically from Menu Manager administration. You can modify how the menu looks in the “main-responsive.css”file, which you can find in “templates/default/css”.
The first and outermost declaration is "vp_horomenu," which
encloses all the elements in the navigation bar.
Below are the CSS related to the navigation bar in the file “main-responsive.css,” which you can modify to suit your own liking:
.megamenu-dropdown {
display: none;
position: absolute;
width: 150px;
z-index: 999;
}
.megamenu-dropdown ul {
padding: 5px 0px;
}
#vp_horomenu li {
list-style: none;
}
/* .megamenu-dropdown ul {
padding-left: 10px;
} */
.megamenu-dropdown a {
display: block;
line-height: 1.42857;
padding: 3px 20px;
width: 100%;
}
.megamenu-dropdown a:hover, .megamenu-dropdown a:focus {
background-color: #f5f5f5;
}
#vp_horomenu li {
position: relative;
text-transform: Uppercase;
}
#vp_horomenu li:hover .megamenu-dropdown {
display: block;
}