Styling nested ul drop down separately from parent

Question

This is proving very difficult. Nav is pasted pasted below. This is a wordpress website so while I could change the structure of the html I'd rather not.

It looks like the nested drop down menus <ul> are contained within parent <li> elements.

My goal is to have, on hover, the list items be orange with 0.4 opacity. I would also like this for the drop down menu line items. Except, the problem is, that when hovering over a line item that has a drop down nested within it, the 0.4 opacity seems to apply to the whole menu, as opposed to just the hovered one. I have tried numerous things. Here is a taste of what I have tried:

.dropdown > ul li:hover {  // the styling in question. Everything below is an attempt to limit this from affecting the whole drop down menus.
    background-color: orange;
    opacity:0.4; 
}

.dropdown > ul.children li:hover, .dropdown > ul.children:hover { // trying to select just the drop down menu and take of the opacity by setting it to 1
  opacity: 1;
}

ul.children li:hover { // similar to above just another attempt
  opacity: 1;
}

ul.children, ul.children:hover, ul.children li, ul.children li:hover{ // just resorting to trying everything now
  opacity: 1;
}

I made a fiddle too: http://jsfiddle.net/m7owomb0/ See how when you hover over the menu items with drop downs it's transparent? Then click on one of the actual links and the styling from the live site loads into the frame. When you hover there it's not transparent and you can see the items clearly. I just want them to be orange when hovered.

    <div id="main-navigation">
  <nav>
    <div class="dropdown dropdown-horizontal">
      <ul class="main-nav">
        <li class="current_page_item">
          <a href="http://dduck8977.webfactional.com/">
            Home
          </a>
        </li>
        <li class="page_item page-item-57">
          <a href="http://dduck8977.webfactional.com/?page_id=57">
            Clear Outs &#038; Offers
          </a>
        </li>
        <li class="page_item page-item-8 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=8">
            Flooring
          </a>
          <ul class='children'>
            <li class="page_item page-item-19">
              <a href="http://dduck8977.webfactional.com/?page_id=19">
                Chestnut
              </a>
            </li>
            <li class="page_item page-item-15">
              <a href="http://dduck8977.webfactional.com/?page_id=15">
                Douglas Fir
              </a>
            </li>
            <li class="page_item page-item-12">
              <a href="http://dduck8977.webfactional.com/?page_id=12">
                Heart Pine
              </a>
            </li>
            <li class="page_item page-item-17">
              <a href="http://dduck8977.webfactional.com/?page_id=17">
                Maple
              </a>
            </li>
            <li class="page_item page-item-10">
              <a href="http://dduck8977.webfactional.com/?page_id=10">
                Oak
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-50 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=50">
            Locations
          </a>
          <ul class='children'>
            <li class="page_item page-item-52">
              <a href="http://dduck8977.webfactional.com/?page_id=52">
                New York
              </a>
            </li>
            <li class="page_item page-item-55">
              <a href="http://dduck8977.webfactional.com/?page_id=55">
                Philadelphia
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-21 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=21">
            Paneling
          </a>
          <ul class='children'>
            <li class="page_item page-item-31">
              <a href="http://dduck8977.webfactional.com/?page_id=31">
                Barn Wood
              </a>
            </li>
            <li class="page_item page-item-27">
              <a href="http://dduck8977.webfactional.com/?page_id=27">
                Eastern Mix
              </a>
            </li>
            <li class="page_item page-item-29">
              <a href="http://dduck8977.webfactional.com/?page_id=29">
                Mushroom Wood
              </a>
            </li>
            <li class="page_item page-item-23">
              <a href="http://dduck8977.webfactional.com/?page_id=23">
                Oak
              </a>
            </li>
            <li class="page_item page-item-25">
              <a href="http://dduck8977.webfactional.com/?page_id=25">
                Pine &#038; Fir
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-40">
          <a href="http://dduck8977.webfactional.com/?page_id=40">
            Patchwork
          </a>
        </li>
        <li class="page_item page-item-37 page_item_has_children">
          <a href="http://dduck8977.webfactional.com/?page_id=37">
            Reclaimed Wood
          </a>
          <ul class='children'>
            <li class="page_item page-item-47">
              <a href="http://dduck8977.webfactional.com/?page_id=47">
                Lumber Phrases
              </a>
            </li>
            <li class="page_item page-item-42">
              <a href="http://dduck8977.webfactional.com/?page_id=42">
                Wood Types
              </a>
            </li>
          </ul>
        </li>
        <li class="page_item page-item-35">
          <a href="http://dduck8977.webfactional.com/?page_id=35">
            Shelving
          </a>
        </li>
        <li class="page_item page-item-33">
          <a href="http://dduck8977.webfactional.com/?page_id=33">
            Tables
          </a>
        </li>
      </ul>
    </div>
  </nav>
</div>

How can I add styling so that hovered line items are orange with opacity 0.4, without affecting nested ULs within these line items?

Answer 1

You cannot override opacity in child elements, use rgba instead.

.dropdown > ul li:hover {
    background-color: rgba(255,165,0,0.4);
}