title: When hovering a CSS list item, change the parent items CSS
body: <p>I have a simple UL list, when you hover over the <code>More</code> list item in the HTML below, it unhides it's child menu and shows it.</p>
  
  <p>What I need to do is change the CSS of the actual <code>More</code>'s CSS once the child menu is show and hovered. </p>
  
  <p>So if you hover over <code>More</code> 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 <code>More</code> as it's text.</p>
  
  <p>If you know how to do this without Javascript, I would love to know.. Maybe it is not even possible without JS?</p>
  
  <pre><code> &lt;div id="nav-wrapper"&gt;
          &lt;ul&gt;
  
              &lt;li&gt;&lt;a href=""&gt;Link&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href=""&gt;Link 5&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href=""&gt;More&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=""&gt;Sub Link 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Sub Link 2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Sub Link 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Sub Link 4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Sub Link 5&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>&lt;style type="text/css" media="screen"&gt;
  #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;
  }
  
  &lt;/style&gt;
  </code></pre>