title: How to override hover and focus in child li element?
body: <p>I am using WordPress</p>
  
  <p>I have put an extra container in the navigation menu. The navigation menu has the id #access, and the extra container has the id #language-selection . The #language-selection container uses <code>&lt;li&gt;</code> elements, but the hover and focus are overridden by the following:</p>
  
  <pre><code>#access li:hover &gt; a,
  #access ul ul :hover &gt; a,
  #access a:focus {
      background: #efefef;
  }
  #access li:hover &gt; a,
  #access a:focus {
      background: #f9f9f9; /* Show a solid color for older browsers */
      background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
      background: -o-linear-gradient(#f9f9f9, #e5e5e5);
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
      background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
      color: #373737;
  }
  </code></pre>
  
  <p>How can i overwrite these rules, so that nothing happens on hover and on focus on the #language-selection container, when it is inside the #access container?</p>
  
  <p>Following is the HTML:</p>
  
  <pre><code>&lt;nav id="access" role="navigation"&gt;
    &lt;h3 class="assistive-text"&gt;Main menu&lt;/h3&gt;
    &lt;div class="skip-link"&gt;
      &lt;a class="assistive-text" href="#content" title="Skip to primary content"&gt;Skip to primary content&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="skip-link"&gt;
      &lt;a class="assistive-text" href="#secondary" title="Skip to secondary content"&gt;Skip to secondary content&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="menu"&gt;
      &lt;ul&gt;
        &lt;li class="page_item page-item-24 current_page_item"&gt;
          &lt;a href="http://localhost/katarina/?lang=en"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="page_item page-item-26"&gt;
          &lt;a href="http://localhost/katarina/?page_id=26&amp;amp;lang=en"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div id="language-selection"&gt;
      &lt;ul class="qtrans_language_chooser" id="qtranslate-chooser"&gt;
        &lt;li class="lang-en active"&gt;
          &lt;a href="http://localhost/katarina/?lang=en" hreflang="en" title="English" class="qtrans_flag qtrans_flag_en"&gt;
            &lt;span style="display:none"&gt;English&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="lang-DK"&gt;
          &lt;a href="http://localhost/katarina/?lang=DK" hreflang="DK" title="Dansk" class="qtrans_flag qtrans_flag_DK"&gt;
            &lt;span style="display:none"&gt;Dansk&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="lang-fa"&gt;
          &lt;a href="http://localhost/katarina/?lang=fa" hreflang="fa" title="Farsi" class="qtrans_flag qtrans_flag_fa"&gt;
            &lt;span style="display:none"&gt;Farsi&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="lang-ar"&gt;
          &lt;a href="http://localhost/katarina/?lang=ar" hreflang="ar" title="???????" class="qtrans_flag qtrans_flag_ar"&gt;
            &lt;span style="display:none"&gt;???????&lt;/span&gt;
          &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="qtrans_widget_end"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>So basically i want hover and focus to remain the same on the "Home" and "Contact" links, but to be deactivated on every li element inside #language-selection</p>