Always on button for page navs?

[paganpete]

Hi all, new to the site but have heard you are all really helpful!

I have a problem with the 3 level DD menu here;

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

It all works fine but what I need to do is have the current page button highlighted for whichever page the viewer is on (for instance the off state is grey and on state is orange on mouseover - but if they navigate to the contact page (eg) I want the link to stay orange (not go back to grey)- I really have no idea on this (have looked at other css where this is done but it will not work on mine)?

Help REALLY appreciated!

TIA.

Pete

[JShor]

Try inserting this into your CSS:


.active {
background: orange;
}


then for the tab you wanna make the active one, change:


<li><a href="#">Sub Item 1.2</a></li>


to this:


<li class="active"><a href="#">Sub Item 1.2</a></li>


HTH:)

[paganpete]

Thanks very much for the quick reply but it did not help - in dreamweaver the line is now coloured orange but in live view and on the site it does not appear (only put it on the about link page to test it) - please see link . . .

http://www.blackdogsquare-design.co.uk/CLIENTS/cm/pd/index.html

Also this is the full code copied from my css slide file

.jqueryslidemenu{
font: bold 10px "Trebuchet MS", sans-serif ;
background: #ffffff;
text-align:left;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #ececec url(images/site-images/grey-menu-grad.png) top left repeat-x; /*background of tabs (default state)*/
color: black;
text-align:left;
padding: 3px 48px 3px 5px;
border-right: 1px solid #ffffff;
color: #ffffff;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: black;
}

.jqueryslidemenu ul li a:hover{
background: #fd3815 url(images/site-images/orange-menu-grad.png) top left repeat-x; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: bold 12px "Trebuchet MS", sans-serif ;
width: 170px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid #ffffff;
color: #ffffff;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

.active {
background: orange;
}



/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

It should work like that but for some reason it will not have I messed up along the way?

[X96 Web Design]

Quick Fix: DON'T USE A PROGRAM. Use a plain-text editor [cough]Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm)[cough] and Firefox (http://getfirefox.com), and that's all you need!! :)
I found WYSIWYG editors to be a pain in the you-know-what...

Have you tried using a hexadecimal code instead of the word "orange"? Try #FF5600.

Cheers,
X96

[paganpete]

Hi X,

I tried the hex code and the orange line appears in the dreamwevaer view but not in the live view or on the uploaded site!

Really confused by it!

[X96 Web Design]

Try putting class="active" on the <A> tag instead of the <LI>. See if that works....

Cheers,
X96