Menu icon Foundation
Changing styles for dropdown menu in mobile devices only

I'm trying to change the style of the drop down menu when being viewed on mobile devices but I do want the top bar menu buttons in the desktop version to be affected. I've added my code below. Please let me know if I need to clarify anything.

            

         <div class="contain-to-grid sticky large-12 columns">
    <nav class="top-bar" data-topbar data-options="sticky">

      <ul class="title-area"> 
        <li class="floatleft name"><h1><a href="#">Wave B</a></h1></li>
        <li class="floatleft" id="logo_bar">
          <span><img src="img/wave_B.png" id="wave_B_Icon" alt="Logo"></span>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li><a href="#">Resume</a></li>
          <li class="has-dropdown">
            <a href="#">Portfolio</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>        
      </section>

    </nav>
  </div>

mobiledropdownstyle

I'm trying to change the style of the drop down menu when being viewed on mobile devices but I do want the top bar menu buttons in the desktop version to be affected. I've added my code below. Please let me know if I need to clarify anything.

            

         <div class="contain-to-grid sticky large-12 columns">
    <nav class="top-bar" data-topbar data-options="sticky">

      <ul class="title-area"> 
        <li class="floatleft name"><h1><a href="#">Wave B</a></h1></li>
        <li class="floatleft" id="logo_bar">
          <span><img src="img/wave_B.png" id="wave_B_Icon" alt="Logo"></span>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li><a href="#">Resume</a></li>
          <li class="has-dropdown">
            <a href="#">Portfolio</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>        
      </section>

    </nav>
  </div>