How to set a menu as selected while selecting its subchild - css

Question

I have got a task to create menu. I want to set the menu as selected while selecting its subchild. My css file is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
//padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
#nav ul li ul li:hover {
}
#nav ul li ul :hover {
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
color: #000;
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-87px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
#nav > ul > li:hover {
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
#menu > li {
border-bottom:#ccc;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
}
#nav ul li:hover ul { margin-left:-1px; } #nav ul li ul:hover { margin-left:-1px; }
ul li ul li
{
width: 180px;
}
.subchild-list {
margin:0;
right:-183px;
position: absolute !important;
top:0;
}
.hassub {
background: url('arrow.gif') right no-repeat;
}
How can i solve this problem?

Answer 1

try this
font-weight:bold;

Answer 2

If I understand your question right, you want the top level navigation to have an active state even on a sub level hover.
In that case, here's the answer (append to your CSS):
#menu li:hover > a {
color: #000;
}
Jsfiddle: http://jsfiddle.net/wDcV5/2/