Hi there,

I would like to apply a CSS background-image to top-level menu items only.

Is there a CSS snippet available that would show how to do this?

I noticed each item has a unique id that could be used but I was wondering if there is a generic style class / id etc that can be used to apply a style to all nice menu top level elements only.

Comments

davidwhthomas’s picture

davidwhthomas commented

No response? I've used the id values for the top menu items to style them, though that's not a good solution because if the client adds new menu items, they will be unstyled and broken. There must be a way to style the top elements only but the CSS looks rather complicated.

lonehorseend’s picture

lonehorseend commented

Actually there is . . .

If you look at the CSS, there are varying levels of UL and li items.

ul.nice-menu li is for the striaght (no sub menu) top level items and ul.nice-menu-right li.menuparent:hover, ul.nice-menu-right li.over, and ul.nice-menu-right li.menuparent are for the vertical menus ones with arrows on the right. (Look for simliar stuff if you are doing horizontal and vertical left arrow facing ones. I'm pulling this from my theme css, so don't have the conventions for that the others currently handy.)

You have to then control the ones beneath these with ul.nice-menu-right ul, ul.nice-menu-right ul li, ul.nice-menu-right ul ul, ul.nice-menu-right li li.menuparent:hover, ul.nice-menu-right li li.over, and ul.nice-menu-right li li.menuparent . . . Again, remember to look for the convention that your particular direction uses.

Hope this helps!

davidwhthomas’s picture

davidwhthomas commented

Thanks for the reply! :-)
That was a big help.
I ended up using the following CSS

ul#nice-menu-2 li a{
	color:#fff;
	background: url(menu_bg1.png) repeat-x;
}

ul#nice-menu-2 ul li a{
	color:#036;
	background: #efefef;
}

ul#nice-menu-2 ul li a:hover{
	color:#fff;
	background: #036;
}

It's definitely a good start and I hope it helps someone else too.
regards,
DT

ivrh’s picture

ivrh commented

Hi. This is a working example of nice_menu.css file used for horizontal menu which completely changes it.
Sizes of "ul li" and "a" elements are set to match picture dimentions and pictures are used as backgrounds.
Two last rules at the bottom are new and the rest of the file is commented original .css file.

/* $Id: nice_menus.css,v 1.14.2.9 2007/08/15 15:42:12 thehunmonkgroup Exp $ */
/*
  This file contains the basic logic for nice menus, and should not be
  edited.  To customize the menus, it's recommended to create a custom CSS file
  using nice_menus_default.css as a template, then configure the module to use
  your custom CSS file (this is done in the global settings tab of the theme
  administration).
*/

/* below should fix menu being a few pixels away in some themes, and menus disappearing behind other stuff */
.block-nice_menus {
 /* line-height: normal;
  font-size: normal;*/
  position: relative;
  /*z-index: 10;*/
}

ul.nice-menu,
ul.nice-menu ul{
  /*z-index: 5;*/
  left:-1px;
}

ul.nice-menu ul li, ul.nice-menu ul li a {
  /*position: relative;
  top: 80px;
  left:400px;*/
  background: none;
  float: left;
  display: inline;
	letter-spacing: 0px;
	vertical-align: middle;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight:normal;
	color: #FFFFFF;
	text-decoration: none;
	text-align: center;
}

ul.nice-menu ul li a:hover, ul.nice-menu ul li a.active {
	color: #B2B2B2;
	text-decoration: none;
	text-align: center;
	font-weight:normal;
}

/*ul.nice-menu a {
  display: inline;
}*/

ul.nice-menu ul,
#header-region ul.nice-menu ul { /* for Garland header */
  position: absolute;
  display: none;
  
}

ul.nice-menu li.over ul {
  display: inline;
}

ul.nice-menu ul li {
  display: inline;
 /**/ float:left;
 
}
/*ul.nice-menu ul li a, ul.nice-menu ul li a:hover, ul.nice-menu ul li a.active {margin:0px; padding: 0px; }*/
ul.nice-menu:after {
  content: ".";
  display: inline;
  height: 0;
  /*clear: both;*/
  visibility: hidden;
}

/* Show submenus when over their parents */
ul.nice-menu li:hover ul,
ul.nice-menu li.menuparent li:hover ul,
ul.nice-menu li.menuparent li.menuparent li:hover ul,
ul.nice-menu li.menuparent li.menuparent li.menuparent li:hover ul,
ul.nice-menu li.over ul,
ul.nice-menu li.menuparent li.over ul,
ul.nice-menu li.menuparent li.menuparent li.over ul,
ul.nice-menu li.menuparent li.menuparent li.menuparent li.over ul,
/* Repeat all this stuff just for Garland headers */
#header-region ul.nice-menu li:hover ul,
#header-region ul.nice-menu li.menuparent li:hover ul,
#header-region ul.nice-menu li.menuparent li.menuparent li:hover ul,
#header-region ul.nice-menu li.over ul,
#header-region ul.nice-menu li.menuparent li.over ul,
#header-region ul.nice-menu li.menuparent li.menuparent li.over ul {
  display: inline;
 /**/ float:left;
}

/* Hide sub-menus initially */
ul.nice-menu li:hover ul ul,
ul.nice-menu li:hover ul ul ul,
ul.nice-menu li:hover li:hover ul ul,
ul.nice-menu li:hover li:hover ul ul ul,
ul.nice-menu li:hover li:hover li:hover ul ul,
ul.nice-menu li:hover li:hover li:hover ul ul ul,
ul.nice-menu li.over ul ul,
ul.nice-menu li.over ul ul ul,
ul.nice-menu li.over li.over ul ul,
ul.nice-menu li.over li.over ul ul ul,
ul.nice-menu li.over li.over li.over ul ul,
ul.nice-menu li.over li.over li.over ul ul ul,
/* Repeat all this stuff just for Garland headers */
#header-region ul.nice-menu li:hover ul ul,
#header-region ul.nice-menu li:hover ul ul ul,
#header-region ul.nice-menu li:hover li:hover ul ul,
#header-region ul.nice-menu li:hover li:hover ul ul ul,
#header-region ul.nice-menu li:hover li:hover li:hover ul ul,
#header-region ul.nice-menu li:hover li:hover li:hover ul ul ul,
#header-region ul.nice-menu li.over ul ul,
#header-region ul.nice-menu li.over ul ul ul,
#header-region ul.nice-menu li.over li.over ul ul,
#header-region ul.nice-menu li.over li.over ul ul ul,
#header-region ul.nice-menu li.over li.over li.over ul ul,
#header-region ul.nice-menu li.over li.over li.over ul ul ul {
  /*display: none;*/
}

/* [IE6] Invisible iframe to fix z-index bug when menu hovers over <select> fields*/

ul.nice-menu li.menuparent ul,
#header-region ul.nice-menu li.menuparent ul { /* for Garland header */
	overflow: visible !important;
	/* overflow: hidden; */
}

ul.nice-menu li.menuparent ul iframe,
#header-region ul.nice-menu li.menuparent ul iframe { /* for Garland header */
	display/**/:inline;
	float:left;
	position:absolute;
	/*top:0;
	left:0;*/
	/*z-index:-1;*/
	filter:mask();
	width:600px;
	height:400px;
}

 #topnav-submenu {margin:0px;}
 
  #primaryNavigation {margin: 0px;}
  
ul.nice-menu ul {
	width: 543px;
	height: 42px;
	float: left;
	background: url(../../themes/poets/images/header/topnav-BG.gif) no-repeat 3px bottom;
	left: -3px;
	top: 39px;
	color: #FFFFFF;
	text-decoration: none;
	vertical-align: bottom;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 12px;
	/*line-height: 39px;*/
	text-align: left;
		padding-top: 3px;
	
}
ul.nice-menu-down ul li {
  	/*padding: 0;
	margin: 0;
	height: 12px;
	margin-top:13px;*/
	
	
/*	margin-right: 3px;
*/	
}
ul.nice-menu-down ul li a, ul.nice-menu-down ul li a:hover, ul.nice-menu-down ul li a.active {
	margin: 0;
	border-left: solid 1px #FFF;
	height: 17px;
	line-height: 20px;
	width:0;
	width: auto;
    background: none;
	padding:0px 10px 0px 10px;
	margin-top:13px;
	/*text-indent: -2px;
	margin-left:-10px;
	padding-left:20px;*/
}
add1sun’s picture

add1sun commented
Status: Active » Fixed

Marking this fixed since it seems resolved.

Anonymous’s picture

(not verified) commented
Status: Fixed » Closed (fixed)