Home > DeveloperSection > Forums > When hovering a CSS list item, change the parent items CSS
Simons Hood
Simons Hood

Total Post:70

Posted on    September-25-2013 8:53 AM


 1 Reply(s)
 5336  View(s)
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">


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

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

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


                    <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>






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

#nav-wrapper ul {


    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;







    right: 320px;

    width: 420px;



Pravesh Singh

Total Post:411

Posted on    September-25-2013 10:02 AM

Hi Samuel,
You can try this:





            <li>Sub Link 1</li>

            <li>Sub Link 2</li>

            <li>Sub Link 3</li>


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





    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; }

Don't want to miss updates? Please click the below button!

Follow MindStick