help with menu active state. "Solved"
Posted: Sat Jan 22, 2011 7:33 am
Hello, I am learning to use CMSMS 1.9.1 . I am trying to get the menu button of the page being viewed or active to be highlighted. See css code below. Everything seems to be working ok except the active state of the menu.
Any clues or help to point me in the right direction is greatly appreciated. Thanks....Matt
http://www.uhqprint.com/
#menu {
width: 500px;
height: 65px;
float: left;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EDEBD5;
border-bottom-color: #EDEBD5;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #EDEBD5;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #EDEBD5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 109px;
height: 45px;
padding: 20px 0 0 0;
border-left: 1px solid #EDEBD5;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 144%;
color: #BABABA;
}
#menu a:hover {
background: #0066dd;
}
#menu .active a {
background: #0066dd;
color: #FFFFFF;
}
Any clues or help to point me in the right direction is greatly appreciated. Thanks....Matt
http://www.uhqprint.com/
#menu {
width: 500px;
height: 65px;
float: left;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #EDEBD5;
border-bottom-color: #EDEBD5;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #EDEBD5;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #EDEBD5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 109px;
height: 45px;
padding: 20px 0 0 0;
border-left: 1px solid #EDEBD5;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 144%;
color: #BABABA;
}
#menu a:hover {
background: #0066dd;
}
#menu .active a {
background: #0066dd;
color: #FFFFFF;
}