Transparent Nice Menus for both vertical and horizontal menus
Last updated on
30 April 2025
I updated the code a few places, so that both vertical and horizontal menus are transparent.
Remember to put the three pieces of graphic in a folder in your theme, and to update all the paths for them to match your installation, example:
/sites/all/themes/ninesixty/images/grey50pc.png
-- rename to:
/sites/all/themes/YOUR_THEME_NAME/images/grey50pc.png
Google cache of the graphics, the original post is down.
The below based on this version:
/* $Id: nice_menus_default.css,v 1.7 2009/02/09 00:19:36 add1sun Exp $ */
It works in Firefox and Epiphany, but hasn't been tested in IE.
ul.nice-menu,
ul.nice-menu ul {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #ccc;
}
ul.nice-menu li {
border: 1px solid #ccc;
border-top: 0;
float: left;
background: transparent url(/sites/all/themes/ninesixty/images/grey50pc.png) repeat 0% -0px;
/* Additional overrides to deal with Garland theme. */
margin: 0;
padding-left: 0; /* LTR */
}
/* Overrides for Garland header. */
#header-region ul.nice-menu li {
margin: 0;
/* Padding rules are needed to deal with Garland's header line-height. */
padding-top: 0.1em;
padding-bottom: 0.1em;
background: transparent url(/sites/all/themes/ninesixty/images/grey50pc.png) repeat 0% -0px;
}
ul.nice-menu a {
padding: 0.3em 5px 0.3em 5px;
}
ul.nice-menu ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu ul {
top: 1.8em;
left: -1px; /* LTR */
border: 0;
border-top: 1px solid #ccc;
margin-right: 0; /* LTR */
}
/* Override for Garland header. */
#header-region ul.nice-menu ul {
top: 1.7em;
}
ul.nice-menu ul li {
width: 12.5em;
}
/******************************
VERTICAL (left/right) menus
******************************/
/* This is the default width of all vertical menus. */
ul.nice-menu-right, ul.nice-menu-left,
ul.nice-menu-right li, ul.nice-menu-left li {
width: 12.5em;
}
/* VERTICAL menus where submenus pop RIGHT (default). */
ul.nice-menu-right ul {
width: 12.5em;
left: 12.5em;
top: -1px;
}
ul.nice-menu-right ul ul {
width: 12.5em;
left: 12.5em;
top: -1px;
}
ul.nice-menu-right li.menuparent,
ul.nice-menu-right li li.menuparent {
background: transparent url(/sites/all/themes/ninesixty/images/grey50pcarrow.png) left center no-repeat;
}
ul.nice-menu-right li.menuparent:hover,
ul.nice-menu-right li.over,
ul.nice-menu-right li li.menuparent:hover,
ul.nice-menu-right li li.over {
background: transparent url(/sites/all/themes/ninesixty/images/dkgrey50pc.png) left center no-repeat;
}
/* VERTICAL menus where submenus pop LEFT. */
ul.nice-menu-left li ul {
width: 12.5em;
left: -12.65em;
top: -1px;
}
ul.nice-menu-left li ul li ul {
width: 12.5em;
left: -12.65em;
top: -1px;
}
ul.nice-menu-left li.menuparent,
ul.nice-menu-left li li.menuparent {
background: transparent url(/sites/all/themes/ninesixty/images/grey50pcarrow.png) left center no-repeat;
}
ul.nice-menu-left li.menuparent:hover,
ul.nice-menu-left li.over,
ul.nice-menu-left li li.menuparent:hover,
ul.nice-menu-left li li.over {
background: transparent url(/sites/all/themes/ninesixty/images/dkgrey50pc.png) left center no-repeat;
}
ul.nice-menu-left a, ul.nice-menu-left ul a {
padding-left: 14px;
}
/******************************
HORIZONTAL (down) menus
******************************/
ul.nice-menu-down {
float: left; /* LTR */
border: 0;
}
ul.nice-menu-down li {
border-top: 1px solid #ccc;
}
ul.nice-menu-down li li {
border-top: 0;
}
ul.nice-menu-down ul {
left: 0; /* LTR */
}
ul.nice-menu-down ul li {
clear: both;
}
ul.nice-menu-down li ul li ul,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li ul li ul {
left: 12.5em; /* LTR */
top: -1px;
}
ul.nice-menu-down .menuparent a {
padding-right: 15px; /* LTR */
}
ul.nice-menu-down li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent {
background: transparent url(/sites/all/themes/ninesixty/images/grey50pcarrow.png) left center no-repeat;
}
ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li.menuparent:hover,
#header-region ul.nice-menu-down li.over {
background: transparent url(/sites/all/themes/ninesixty/images/dkgrey50pc.png) left center no-repeat;
}
ul.nice-menu-down li li.menuparent,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent {
background: transparent url(/sites/all/themes/ninesixty/images/grey50pcarrow.png) left center no-repeat;
}
ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over,
/* Repeat for Garland header. */
#header-region ul.nice-menu-down li li.menuparent:hover,
#header-region ul.nice-menu-down li li.over {
background: transparent url(/sites/all/themes/ninesixty/images/dkgrey50pc.png) left center no-repeat;
}
Help improve this page
Page status: Not set
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion