Menu not conforming to CSS definitions

This post has 0 replies

Not Ranked
Posts: 7
wageslave
Reply
wageslave Posted: Fri Aug 7, 2009 @ 8:05 PM
I've followed the live menu examples (in this particular case the MS Windows Vista demo code) in order to configure a custom menu with topgroup CSS definitions that should set the background and font color to be different from the menugroup. However the grid is not conforming to the CSS definition for the topgroup. I've tried numerous ways of getting it to do so with no luck. The .TopMenuItem definition is ignored, the font color is picked up from .MenuItem instead. This causes the topgroup to be black text against a black backround, instead of the expected white text against a black background. Any suggestions?

Here is my code, followed by the CSS definitions:










******************************************
.TopGroup
{
background-color: #000000;
cursor: pointer;
}

.TopMenuItem
{
background-color: #E6E6E6;
color: #FFFFFF;
font-family: verdana;
font-size: 12px;
border-top: 0px #000000 solid;
border-bottom: 0px #000000 solid;
border-right: 1px #8E8E96 solid;
border-left: 0px #000000 solid;
cursor: pointer;
}

.TopMenuItemHover
{
background-color: #E6E6E6;
color: white;
font-family: verdana;
font-size: 12px;
border-top: 0px #000000 solid;
border-bottom: 0px #000000 solid;
border-right: 10px #E6E6E6 solid;
border-left: 0px #000000 solid;
cursor: pointer;
}

.MenuGroup
{
background-color: #E6E6E6;
border-top: 0px #000000 solid;
border-bottom: 1px #000000 solid;
border-right: 1px #000000 solid;
border-left: 1px #000000 solid;
border-style: solid;
cursor: pointer;
}

.MenuItem
{
border-top: 0px #000000 solid;
border-bottom: 0px #000000 solid;
border-right: 1px #8E8E96 solid;
border-left: 0px #000000 solid;
color: #000000;
font-family: verdana;
font-size: 12px;
cursor: pointer;
}

.MenuItemHover
{
background-color: #3F3F3F;
border-top: 0px #000000 solid;
border-bottom: 0px #000000 solid;
border-right: 1px #8E8E96 solid;
border-left: 0px #000000 solid;
font-family: verdana;
font-size: 12px;
color: #FFFFFF;
cursor: pointer;
}

.MenuItemDown
{
background-color: #E6E6E6;
border-top: 0px solid #B8B8B9;
border-left: 0px solid #B8B8B9;
border-right: 1px solid #E6E6E6;
border-bottom: 0px solid black;
font-family:verdana;
font-size: 12px;
color: #000000;
cursor: pointer;
}
Page 1 of 1 (1 items)