sub menu display problem (solved)

[Coolarm]

Hi,

Sorry if this has been posted somewhere else but I couldn't find it.

I'm having a problem getting the sub menus to display in the right state. i.e. The sub menu's just display the same attributes as their parent menu, in this case bold and underlined.

I'm using css menu - vertical.

I'd like them to display normally until the sub menu page is selected and then display underline/bold.

How do I achieve this?

This is the page I'm working


Any help would be greatly apprciated, cheers,

Coolarm

[Vin]

The link doesn't work...
This is done in CSS. Pseudoclass :hover is used to change text attributes when hovering over the text with the mouse.
So, IMHO, you've got to change the attributes for the a and :hover element in css. If you're not familiar with CSS, post the code of your stylesheet so that I can help.

[Coolarm]

Hi Vin,

Thanks for replying, maybe I didn't explain myself very well.

I've had no problem amending the CSS for the hover, that all works fine. What I haven't been able to achieve is getting the right menu display for the active page. It works fine on the 1st level of the menu but the sub menu's just display exactly the same state as their parent menu.
i.e.
if menu
1
is bold

menu
1.1
1.2 etc

are also display bold.

I want 1.2 to be bold only when you select 1.2 not menu 1 or 1.1

Heres the code from the menu


/* Vertical menu for the CMS CSS Menu Module */
/* by Alexander Endresen */


/* The wrapper determines the width of the menu elements */
#menuwrapper {
  width: 100%;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 0px;
  padding: 0px 0px 0px 0px;
  width:100%;
  margin-left: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;


}
#primary-nav ul {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
#primary-nav li {
  margin-bottom: -1px;
  position: relative;
}


/* Styling the basic apperance of the menu elements */
#primary-nav a {
  border: 0px;
  display: block;
  margin: 0px;
  padding:7px 5px 7px 0px;
  color: #7E5857;
  text-decoration: none;
  background: transparent;
  min-height:1em; /* Fixes IE7 whitespace bug*/

}
#primary-nav li, #primary-nav li.menuparent {
 
  min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive a{
text-decoration:underline;
color: #7E5857;
font-weight: bold;

}

/* 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 a{
  /* arrow for menuparents */
  background-repeat: no-repeat;

  }


/* Styling the apperance of menu items on hover
NOTE from Doug-added "#primary-nav ul li.menuparent:hover," to this section so it works in FF and IE6*/
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav ul li.menuparent:hover,
#primary-nav li.menuactiveh a{
  background-color: #DCD2D1;
color: #7E5857;

}

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
font-weight: normal;

}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
font-weight: normal;

}



/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }


/* section header */
#primary-nav li.sectionheader {
  border-left: 0;
  border-top: 0;
  font-size: 12px
  font-weight: normal;
  padding: 1.5em 0 0.8em 0.5em;
  background-color: #fff;
  margin: 0;
  width: 100%;
}


/* separator */
#primary-nav li hr.separator {
  display:block;
  height: 0.5em;
  color: #abb0b6;
  background-color: #abb0b6;
  width: 100%;
  border:0;
  margin:0;
  padding:0; 
  border-top: 0;
  border-right: 0;
}

dfn {
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 0;
  height: 0;
  overflow: hidden;
  display: inline;
}

[Vin]

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive a{
text-decoration:underline;
color: #7E5857;
font-weight: bold;

}

Either change it to

Code: Select all

#primary-nav li.menuactive

or

Code: Select all

#primary-nav a.menuactive

Hope that helps.

[Coolarm]

Thanks Vin,

That sorted it.

Much appreciated!