Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
I wanted a superfish menu in the menubar and the default styling is pretty awful, so I added the following to the Custom CSS extension.
This is for horizontal menu only.
/* Menu bar / superfish */
#menu-bar {
padding-top: 5px;
height: 24px;
}
.sf-style-none a {
padding: 4px 8px 8px 8px;
margin: 0px 0px 0px 0px;
}
.sf-style-none a.sf-with-ul {
padding-right: 2.25em;
}
.sf-style-none.rtl a.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
.sf-style-none li {
margin: 0 0 0 0;
padding: 0;
background: #BEBEBE;
}
/* undo default shadow */
.sf-menu.sf-horizontal.sf-shadow ul {
background: none;
padding: 0 0 0 0 !important;
}
/* redo shadow with box-shadow */
.sf-menu.sf-horizontal.sf-shadow ul {
-moz-box-shadow:5px 5px 8px #666;
-webkit-box-shadow:5px 5px 8px #666;
box-shadow:5px 5px 8px #666;
}
/* fix arrow position */
.sf-horizontal .sf-sub-indicator {
top: 6px;
}
/* mouseover */
.sf-style-none li:hover,
.sf-style-none li.sfHover,
.sf-style-none a:focus,
.sf-style-none a:hover,
.sf-style-none a:active {
outline: 0;
background: #CECECE;
}
/* dropdown position */
.sf-style-none li:hover ul,
.sf-style-none li.sfHover ul {
top: 28px;
}
.sf-style-none li li:hover ul,
.sf-style-none li li.sfHover ul,
.sf-style-none li.active-trail ul {
left: 0;
top: 0;
}
/* active page */
.sf-style-none a:active, .sf-style-none a.active {
color: #004000;
background: #C0C0C0;
}
Hope this helps someone.