How to keep all the parent except the first LI highlighted when the sub LI is hovered over


Tags: jquery,html,css

Problem :

HTML:

<ul id="ulMenu">
    <li class="parent">
        <a href="">Software Update</a>
        <ul class="ulSubMenu">
            <li>
                <a href="">2010</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="">2011</a>
                <ul class="ulSubMenu">
                    <li>
                        <a href="">Version 1</a>
                        <ul class="ulSubMenu">
                            <li><a href="">Ver 1 Complete</a></li>
                            <li><a href="">Ver 1 Not Yet</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS:

ul.ulSubMenu > li > a:hover
{
      background-color: #008AAC;
      color: #C5F3FF;
}
.active {
    background-color: #008AAC;
    color: #C5F3FF;
}

JQuery:

I would like to add a script which sets any parent LI to the sub menu class to active except the parent LI

For example, if I hover "Ver 1 Complete" under the 2010 section it will change the styling with the hover css. I would also like to make the same style with the class active for Version 1 and 2010 LI.

How can I do that.



Solution :

I updated my CSS to the following:

ul.ulSubMenu > li > a {
    text-decoration: none;
    background-color: #C5F3FF;
    border: 1px solid #53E1FF;
    border-top: none;
    color: #008AAC;
    display: block;
    font-size: 12px;
    line-height: 15px;
    padding: 10px 12px;
    cursor: pointer;
}

ul.ulSubMenu > li:hover
{
    background-color: #008AAC;
    color: #C5F3FF;
}
ul.ulSubMenu > li:hover > a
{
    color: #C5F3FF;
    background-color: #008AAC;
}

    CSS Howto..

    CSS hover transition - how to remove delay?

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    How to add a color in the
    bottom content area?

    How to make this arrow in CSS only?

    CSS: How to make a span link to expand?

    How to Keep CSS Background Image on top of all divs(breadcrumb arrows)?

    How to use CSS hover inside html-tag?

    How to create a sub folder on Page?

    How to set HTML table cell to inherit its size?

    How do I specify IE 11 specific css file?

    How to make table have same width as container?

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How would I make this into an dynamic :nth-child css selector [duplicate]

    How to get css class name using Selenium?

    How do I slow down the banner transitions on my homepage? CSS

    How to parameterize CSS selectors? [duplicate]

    Show and hide img

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How to use CSS to adjust HTML5 validation indicator

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    How can I center the page to allow background on sides?

    How to apply css to only one level of list items (not to child elements)

    How to create a “shiny” effect like this using CSS gradients?

    How to create an absolutely positioned submenu which appears on css hover

    How to validate HTML/CSS running in localhost?

    Dropdown container not showing right padding

    How to make a vertical bar that follows its user in a specific area?

    How to assign a:hover, a:visited, etc. using the style attribute only [duplicate]

    How to achieve this gradient using valid HTML & CSS only

    How to force text wrapping with floated elements