WHEN HOVERING A CSS LIST ITEM, CHANGE THE PARENT ITEMS CSS

Simons Hood

Total Post:70

Points:494
Posted by  Simons Hood
 6529  View(s)
Ratings:
Rate this:

I have a simple UL list, when you hover over the More list item in the HTML below, it unhides it's child menu and shows it.

What I need to do is change the CSS of the actual More's CSS once the child menu is show and hovered.

So if you hover over More a child menu becomes visible, you then hover over that child menu. At this point I need to change the CSS of the Parent of this child menu which would be the menu that has More as it's text.

If you know how to do this without Javascript, I would love to know.. Maybe it is not even possible without JS?

 <div id="nav-wrapper">

        <ul>

            <li><a href="">Link</a></li>

            <li><a href="">Link 5</a></li>

            <li><a href="">More</a>

                <ul>

                    <li><a href="">Sub Link 1</a></li>

                    <li><a href="">Sub Link 2</a></li>

                    <li><a href="">Sub Link 3</a></li>

                    <li><a href="">Sub Link 4</a></li>

                    <li><a href="">Sub Link 5</a></li>

                </ul>

            </li>

        </ul>

    </div>

The CSS

<style type="text/css" media="screen">

#nav-wrapper ul {

    position:relative;

    width: 700px;

    float: right;

    margin: 0;

    list-style-type: none;

}

#nav-wrapper ul li {

    vertical-align: middle;

    display: inline;

    margin: 0;

    color: black;

    list-style-type: none;

}

#nav-wrapper ul li a {

    text-decoration: none;

    white-space: nowrap;

    line-height: 45px;

    font-size: 13px;

    color: #666;

    padding: 5px 15px;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

}

#nav-wrapper ul li a:hover {

    color: #fff;

    background-color: #4caef2;

}

#nav-wrapper ul li a:visited {

    color: #666;

}

/* Hide Sub-menus */

#nav-wrapper ul ul{

    display: none;

}

/* SHOW Sub-menus on HOVER */

#nav-wrapper ul li:hover ul{

    display: block;

    margin:-10px 0 0 0;

    padding:0px 20px 20px 20px;

    border-color:#fff;

    border:1px;

    border-style:solid;

    background:#FFF;

    position:absolute;

    top:45px;

    right: 320px;

    width: 420px;

}

</style>

  1. Pravesh Singh

    Post:412

    Points:2888
    Re: When hovering a CSS list item, change the parent items CSS

    Hi Samuel,

    You can try this:

    HTML:

    <ul>

        <li>

            <ul>

                <li>Sub Link 1</li>

                <li>Sub Link 2</li>

                <li>Sub Link 3</li>

            </ul>

            <a href="#">Menu</a>

        </li>

    </ul>

    CSS:

     {

        marign: 0;

        padding: 0; }

    ul { list-style: none; }

    ul > li { position: relative; }

    ul li a {

        height: 16px;

        display: block; }

    ul ul {

        position: absolute;

        top: 16px;

        left: 0;

        cursor: pointer;

        display: none; }

    ul li:hover ul { display: block; }

    ul ul:hover + a { color: red; }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!