Problem trying to change background colour of parent menu when child m

css navigation highlight problem

[shresthadipak]

Hi,

I am having problem in trying to change background color for parent menu (ul li) when child menu (ul li) is selected.

On my example Menu 3.3.2 is currently selected. I would like to have different background color for Menu 3 and Menu 3.3

I don't know if it is possible to do using only css.

Any suggestion will be helpful.

<snip>
No URL's please, see TOS [webmasterworld.com]

[edited by: limbo at 2:53 pm (utc) on Mar 23, 2010]

[limbo]

Hi shresthadipak

Welcome to WebmasterWorld [webmasterworld.com] :)

Can you strip you HTML and CSS down the bare basics and we'll have a look for you.

[shresthadipak]

Here is html.

<div class="one-col" id="links-module">
<h2 class="header4 block-margin-bottom">List</h2><ul>
<li ><a href="#" title="" alt="">Menu 1 </a></li>
<li ><a href="#" title="">Menu 2 </a></li>
<li ><a href="#" title="">Menu 3 </a>
<ul>
<li ><a href="#" title="" alt="Director">Menu 3.1 </a></li>
<li ><a href="#" title="" alt="Estates">Menu 3.2 </a></li>
<li ><a href="#" title="" alt="Finance">Menu 3.3 </a>
<ul>
<li ><a href="#" title="" alt="Head of Finance">Menu 3.3.1 </a></li>
<li ><a href="#" title=" " alt=""class="nav-selected">Menu 3.3.2 </a></li>
<li ><a href="#" title="" alt="">Menu 3.3.3 </a></li>
<li ><a href="#" title="" alt="s">Menu 3.3.4 </a></li>
<li ><a href="#" title="" alt="">Menu 3.3.5 </a></li>
<li ><a href="#" title="" alt="">Menu 3.3.6 </a></li>
</ul></li>
<li ><a href="#" title="" alt="">Menu 3.4 </a></li>
<li ><a href="#" title="" alt="">Menu 3.5 </a></li>
</ul></li>
<li ><a href="#" title="" alt="">Menu 4 </a></li>
<li ><a href="#" title="" alt="">Menu 5 </a></li>
</ul>
</div>

[shresthadipak]

Here is css.
#content {
width: 300px;
}

#content ul li {
list-style:none;
}

#links-module ul li {
background: none;
padding-left: 0px;
border-bottom: 1px solid #e7e7de;
border-left: 1px solid #e7e7de;
border-right: 1px solid #e7e7de;
}
#links-module ul li a{
padding: 0px 7px;
display: block;
background: #f8f7ee;
color: #2B8006;
line-height: 1.8em;
font-size:1em;
}

#links-module ul li a.nav-selected{
background: #549534;
text-decoration: none;
color: #fff;
font-weight:bold;
}

#links-module ul li ul li a {
font-size:0.9em;
}

#links-module ul li ul li a.nav-selected:hover{
text-decoration: none;
color: #fff;
background: #549534;
}

#links-module ul li ul li ul li {
background-color: #fff;
border-top:none;
}
#links-module ul li ul li ul li a{
background: #fff 20px 7px;
font-size: 0.9em;

}
#links-module ul li ul li a.nav-selected {
text-decoration: none;
color: #fff;
}

#links-module ul li ul li ul li a.nav-selected {
text-decoration: none;
color: #fff;
}