[Solved]: Problem with CSS for javascript menu

[WV_NPO]

I found a really slick menu system (http://www.dynamicdrive.com/style/cssli ... ss_menu_2/) that I would like to implement for a new CMSMS site that I'm developing.

The only problem is that I cannot get the CSS to properly style the text for the current page in the menu.  This happens for every page no matter where it is located in the menu hierarchy.  I'm new with CMSMS and a novice with CSS, so any help would be greatly appreciated.  Thanks in advance.

Link: http://www.railwv.org/cmsmadesimple/
Javascript Menu CSS: http://www.railwv.org/cmsmadesimple/jqueryslidemenu.css
Javascript Menu: http://www.railwv.org/cmsmadesimple/jqueryslidemenu.js

[Szandor]

I take it it's the current page in the menu that you mean? I'd solve that by changing the menu template to not use an tag. Maybe I'd set it to a instead, just to make it easier to style. You have no CSS rule that targets that , so either write a rule or, the best option, get rid of the .

[Greg]

Add your style preferences to .jqueryslidemenu .currentpage h3

example
.jqueryslidemenu .currentpage h3{color: red; font-size: .75em;}

[WV_NPO]

Thanks for the ideas.  I added the following lines.

.jqueryslidemenu .currentpage h3{
color:white;
background: #8F8A53;
font: bold 12px Verdana;
}

This formats the font properly.  However, the menu text for the current page will not align like the other menu buttons.  Current pages buttons in the submenus will not format properly as well.  They seem to have the correct background color immediately surrounding the text but are encapsulated in a transparent cell.  They don't have any rollover action either.

I also can't find an h3 tag in the menu stylesheet to change or remove.

Any thoughts?  Thanks again.

[Dr.CSS]

You ever thought about giving the h3 the same css as the a ?...

[WV_NPO]

Thanks.  I applied the a css to the h3 css.  It's styled almost correctly, except for 2 things:
1) In Firefox, the current page in the top level of the menu seems to have an extra margin on the top in the menubar.  I've adjusted the padding for h3 in css, but this margin stays constant.

2)Whatever, I set the h3 padding for affects the current page link even in the submenu.  This causes the current page submenus to be wider than the others.  Is is possible to set the padding for top level current page menu and submenus separately?

Here is the css that I'm using

/*Current page menu style*/
.jqueryslidemenu .currentpage h3{
display: block;
background: #8F8A53;
color:white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
font: bold 12px Verdana;
}

/*Top level menu link items style*/ 
.jqueryslidemenu ul li a{
display: block;
background: #8F8A53; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

I look forward to your suggestions.  Thanks in advance.

[Dr.CSS]

The h3 call in most browsers have some margin around them, hint hint...

[WV_NPO]

Thanks.  I went back to the template style sheet and made the necessary changes along with changing width in the menu style sheet.  It's working well for me now.