Glossy Horizontal Menu

[rbothe]

I'm using the Glossy Horizontal Menu found at:
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/

I'm using a CMS system and I have copied the CSS and HTML, but when I go to my site the "active" state of the buttons isn't working. It always shows my default page as active.

I copied the CSS as is.. here's what I've got:



/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(/uploads/images/nav/menur_bg.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#555;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(/uploads/images/nav/menur_hover_left.gif) no-repeat; /*left tab image path*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(/uploads/images/nav/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Please help!

Rich

[boogyman]

Welcome to the forums Rich.

Thank you for using a descriptive title, however this should be in the "dynamic drive scripts" category and when you post code in the future can you please wrap the code in [c.ode][/cod.e] tags without the dots?

For a list of all of the posting guidelines and policies visit http://www.dynamicdrive.com/forums/showthread.php?t=24866



now as for your question, what do you mean active? If you are talking about the link of the page you are currently visiting I am assuming your style

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(/uploads/images/nav/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}
is what you want to intended to use for that. The declaration appears correct. You might want to check the url of the image you are using, and you also want to make sure that your "selector" initialization is correct... what I mean by that is



<element class="glossymenu">
<li class="current">
<a href="/url/path">
<b>SOME TEXT</b>
</a>
</li>
</element>

where element is attached to whatever you are calling glossymenu
if your page does not follow that declaration then your css selector will most likely incorrect leading to a possible glitch in rendering