The best way to add onto an existing menu and making it a dropdown

Question

I am trying to alter an existing menu to a hovering dropdown. This seems simple enough, however this is a complex menu that is very nested and has lots of responsive rules and elements.

I'm just wanting to make a simple css dropdown out of it. Something like this

That being said. I am having trouble finding the styling paths. ul li ul etc. I have the code and have been using inspector, but am unable to find the proper styling paths.

Here is the menu I am trying to alter.

<ul class="section-nav__items grid">

    <li class="section-nav__item  section-nav__item--first  section-nav__item--home  grid__item  one-half  current-section"><a href="index.php" data-section="home">Home</a>
        <ul>
           <li>Web Design</li>
           <li>Web Development</li>
           <li>Illustrations</li>
        </ul>
    </li>
    <li class="section-nav__item  section-nav__item--cards  grid__item  one-half"><a href="credit-cards.php" data-section="cards">Cards</a></li>
    <li class="section-nav__item  section-nav__item--mortgages  grid__item  one-half"><a href="#" data-section="mortgages">Mortgages</a></li>
    <li class="section-nav__item  section-nav__item--loans  grid__item  one-half"><a href="loans.php" data-section="loans">Loans</a></li>
    <li class="section-nav__item  section-nav__item--insurance  grid__item  one-half"><a href="#" data-section="insurance">Insurance</a></li>
    <li class="section-nav__item  section-nav__item--banking  grid__item  one-half"><a href="#" data-section="banking">Banking</a></li>
    <li class="section-nav__item  section-nav__item--phones  grid__item  one-half"><a href="#" data-section="phones">Phones</a></li>
    <li class="section-nav__item  section-nav__item--travel  grid__item  one-half"><a href="#" data-section="travel">Travel</a></li>
    <li class="section-nav__item  section-nav__item--last  section-nav__item--coupons  grid__item  one-half"><a href="#" data-section="coupons">Coupons</a></li>

</ul>

for example, I've added the sub items to the first menu item that I want to create a dropdown out of:

<li class="section-nav__item  section-nav__item--first  section-nav__item--home  grid__item  one-half  current-section"><a href="index.php" data-section="home">Home</a>
    <ul>
       <li>Web Design</li>
       <li>Web Development</li>
       <li>Illustrations</li>
    </ul>
 </li>

It seems obvious but I can't find the path to these. Here is the css to the parent li "home" item.

.section-nav--primary .section-nav__item--home  a {
        color: #009f9b;}

Here is an example of what I tried that didn't work:

.section-nav--primary .section-nav__item--home ul li ul a {
        padding: 0;
          position: absolute;
          top: 48px;
          left: 0;
          width: 150px;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
          display: none;
          opacity: 0;
          visibility: hidden;
          -webkit-transiton: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          -ms-transition: opacity 0.2s;
          -o-transition: opacity 0.2s;
          -transition: opacity 0.2s;
    }
      .section-nav--primary .section-nav__item--home ul li ul li {
        background: #555; 
          display: block; 
          color: #fff;
          text-shadow: 0 -1px 0 #000;
    }
      .section-nav-primary .section-nav__item--home ul li ul li:hover {
        background: #666;
    }
      .section-nav--primary .section-nav__item--home ul li:hover ul {
        display: block;
          opacity: 1;
          visibility: visible;
    }

Here is a link to the menu so you can view the source.

Thanks

Answer 1

Take off one of the ul li pairs.

The ".section-nav--primary .section-nav__item--home" are the first ul li.

So it should be

.section-nav-primary .section-nav__item--home ul li:hover {
  background: #666;
}