CMS Made Simple Forums

Hello,

Another problem I have is with my menu.

I want my menu to change image when it is active and to change text color when I hover over it.

My css looks like this:

#menuwrapper {
  /* Fix for Opera 8 */
  /*  overflow: hidden;  */
  /*background-color: #ECECEC;*/
  /*border-bottom: 1px solid #C0C0C0;*/
  width: 100%;
border: 1px solid #03165D; /*dark purple border*/
border-width: 1px 0;
background: black url(images/menubg.gif) center center repeat-x;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
  width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#primary-nav ul {
  position: absolute;
  top: auto;
  display: none;
}
#primary-nav ul ul {
  margin-top: 1px;
  margin-left: -1px;
  left: 100%;
  top: 0px;
}

#primary-nav li {
  margin-left: -1px;
  float: left;
}
#primary-nav li li {
  margin-left: 0px;
  margin-top: -1px;
  float: none;
  position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
/*  color: #006699;*/
color: #FFFFFF;
background: black url(images/menubg.gif) center center repeat-x;
}
#primary-nav li a {
/*  border-right: 1px solid #C0C0C0;
  border-left: 1px solid #C0C0C0;*/
border-right: 1px solid #03165D;
border-left: 1px solid #03165D;
}
#primary-nav li li a {
/*  border: 1px solid #C0C0C0;*/
/*  border: 1px solid #03165D;*/
}
#primary-nav li, #primary-nav li.menuparent {
/*  background-color: #ececec; */
/*  background-color: #03165D; */
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
/*  background-color: #C7C7C7;
  background-color: #03165D; */
background: black url(images/menubg2.gif) center center repeat-x;
color: #000000;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
  background-image: url(images/cms/arrow.gif);
  background-position: center right;
  background-repeat: no-repeat;
background: black url(media/menubg2.gif) center center repeat-x;
color: #000000;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
/*  background-color: #E7AB0B; */
color: #000000;
background: black url(media/menubg2.gif) center center repeat-x;
}
But the image and the text color do not change.

Your images paths are different:

background: black url(images/menubg.gif) center center repeat-x;

background: black url(media/menubg2.gif) center center repeat-x;

Is this the problem?

Nullig

I'm also having a little bit of problems, because I'll like to have an image for each parent and active parent I mean a very complicated for my kwoledge, but I think if you ad this to your code it may work... it does for me!!


#primary-nav a:hover {
  display: block;
  margin: 0px;
  padding: 5px 10px;
  text-decoration: none;
  color:#3399CC /* here is the color for your tesxt */
}

#primary-nav li .menuactive {
background:url(/images/YOURIMAGE.jpg) top center no-repeat;
}

edit: I place my images in the root images folder.

Howdy,

to have different effects, you have to specify each item you're reaching (each ELEMENT)

so, when you mouse over, this is:

a:hover {some css rules here}

when you want the active page, look at your rendered source code, i.e., view source while looking at a page with an ACTIVE link--so, a subpage.

see the css class attached to that link? maybe menu-active or something?

in your CSS, you assign rules like so:
a.menu-active {some rules}

Does that make sense?