forum

Home / DeveloperSection / Forums / When hovering a CSS list item, change the parent items CSS

Ask Question

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

Anonymous User 8346 25-Sep-2013

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>
css-css3 css-css3 
Updated on 25-Sep-2013
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Pravesh Singh

Pravesh Singh

25-Sep-2013
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; }

Liked By