---
title: "When hovering a CSS list item, change the parent items CSS"  
description: "When hovering a CSS list item, change the parent items CSS"  
author: "Anonymous User"  
published: 2013-09-25  
updated: 2013-09-25  
canonical: https://www.mindstick.com/forum/1539/when-hovering-a-css-list-item-change-the-parent-items-css  
category: "css-css3"  
tags: ["css-css3"]  
reading_time: 2 minutes  

---

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

I have a [simple](https://yourviews.mindstick.com/story/1469/5-simple-ways-to-stay-fit-amp-healthy) UL list, when you hover over the More list [item](https://www.mindstick.com/forum/156564/remove-item-in-an-array-in-javascript) in the [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) below, it unhides it's child menu and [shows](https://yourviews.mindstick.com/view/81380/new-york-violent-shooting-shows-people-are-not-safe-in-night-life) it.

What I need to do is change the [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) 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](https://www.mindstick.com/blog/154/how-to-find-parent-of-control-in-wpf) of this child menu which would be the menu that has More as it's [text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions).

If you know how to do this without [Javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript), I would [love](https://www.mindstick.com/articles/126121/love-is-money-money-is-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>
```

## Replies

### Reply by Pravesh Singh

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


---

Original Source: https://www.mindstick.com/forum/1539/when-hovering-a-css-list-item-change-the-parent-items-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.