CodePen

HTML

            
              <ul>
  <li>
    <a href="#">Home Page</a>
  </li>
  <li>
    <a href="#">Events</a>
  </li>
  <li class="dropdown">
    <a href="#">Classes</a>
    <ul>
      <li>
        <a href="#">Dances</a>
      </li>
      <li>
        <a href="#">Meetings</a>
      </li>
      <li>
        <a href="#">Schedule</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Bookings</a>
  </li>
  <li class="dropdown">
    <a href="#">Getting Here</a>
    <ul>
      <li>
        <a href="#">Dances</a>
      </li>
      <li>
        <a href="#">Meetings</a>
      </li>
      <li>
        <a href="#">Schedule</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Contact Us</a>
  </li>
</ul>
<section>
  <p>This is a content area.</p>
</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              ul ul {
  display: none;
}

ul > li {
  width: 350px;
  background-color: #eee;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(function() {
  $('.dropdown').mouseenter(function() {
    $(this).find('ul').show();
  }).mouseleave(function() {
    $(this).find('ul').hide();
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................