Advertise with us

When hovering a CSS list item, change the parent items CSS

Posted by  Simons Hood
 7894  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;
  1. Re: When hovering a CSS list item, change the parent items CSS

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

      Modified On Mar-31-2018 02:07:45 AM