6 Replies Latest reply on Mar 11, 2013 2:34 PM by Victoria Stark Adams

    Dropdown Menu CSS

    Victoria Stark Adams

      Aloha, I am a 1st grade teacher building a html5 website with dreamweaver. 

      This is a code snip from a sidebar clamshell navigation.  The sidebar and clamshell is set up.  I want to have a dropdown menu starting with the red highlighted piece (class="youarehere") that would dropdown the three <li> tag text content.

                What CSS code do I use to target class="youarehere"?  I know I have the class in the correct spot because I want the dropdown menu to start there.  I have tried many combinations, but it doesn't work.  Thank you very much for answering a question from a someone who is not a professional computer programmer!  Smiles, victoria

       

      -------------------------------------CSS CODE SNIPET THAT DOES NOT WORK-------------------------------------------------------

      .youarehere li li li a {

          color: crimson;

          padding-left: .5em;

      }

      --------------------------------------HTML MARKUP SNIP----------------------------------------------------------

      <aside>

      <div id="navClam" class="span-4">

          <ul>

          <li class="youarehere">Mrs. Adam's 1st Grade

              <div id="courseOfferings">

              <ul>

                  <li><a href="#">Math Facts</a></li>

                  <li><a href="#" class="youarehere">How Language B Works</a>

                      <ul>

                          <li><a href="#">Online Video Tutor</a></li>

                          <li><a href="#">Skype With A Native Speaker</a></li>

                          <li><a href="#">Learning With Friends</a></li>

                      </ul>

                 </li>

                  <li><a href="#">Video: Going the Distance in 1st Grade! </a></li>

                  <li><a href="#">Frequently Asked Questions</a></li>

                  <li><a href="#">Need More Information?</a></li>

              </ul>

              </div>

          </li>

          </ul>

      </div>

      </aside>