JSFiddle - React, Tailwind, and code Playground

by imarkdesigns

HTML

<ul>
            <li id=mn_learn>
                <span><a href="">Learn</a></span>
                <div class=toggleLearn>
                  <a href="">tour the pebble</a>
                  <a href="">watch the demo</a>
                  <a href="">the company</a>
                  <a href="">the materials</a>
                  <a href="">the difference</a>
                  <a href="">the comparison</a>
                  <a href="">FAQ's</a>
                  <a href="">press</a>
                </div>
            </li>
            <li id=mn_shop>
                <span><a href="">Shop</a></span>
                <div class=toggleShop>
                  <a href="">blanket</a>
                  <a href="">fitted crib sheet</a>
                  <a href="">lilyPad playmat</a>
                  <a href="">napShack</a>
                  <a href="">pebble changePad</a>
                  <a href="">pebble lite</a>
                  <a href="">pebble organic</a>
                  <a href="">pebble pure</a>
                  <a href="">pebble twin mattress</a>
                  <a href="">toddler pillow</a>
                  <a href="">view all</a>
                </div>
            </li>
        </ul>

CSS

ul { list-style:none; margin:0; }
li { position:relative; display:block; background:#363432; font:1.2em sans-serif; color:#FFF; width:100%; min-height:1%; overflow:hidden; }
li#mn_learn span { background:#fe7223; } 
li#mn_learn span a:first-child { margin-top:10px; }
li#mn_learn span a:last-child { margin-bottom:5px; }

li#mn_shop span { background:#e14366; }
li#mn_shop span a:first-child { margin-top:10px; }
li#mn_shop span a:last-child { margin-bottom:5px; }

li span { display:block; text-indent:10px; line-height:30px; height:30px; cursor:pointer; .box-shadow(0,2px,5px,0,rgba(0,0,0,.7)); }
li span  a { color:#FFF; }

div { display:none; }
div a { display:block; font:12px 'HelveticaNeueLight', sans-serif; color:#FFF; text-indent:10px; text-transform:capitalize; letter-spacing:.05em; width:100%; padding:7px 0; }
div a:hover { color:#fe7223; }

JavaScript

//Nav Animation Script
    $(document).ready(function() {
      $('#mn_learn').bind('mouseenter mouseleave', function(){
            $('.toggleLearn').slideToggle('250');
      });
      $('#mn_shop').bind('mouseenter mouseleave', function(){
            $('.toggleShop').slideToggle('250');
      });
    });