A Pen by Bobby.

A-Pen-by-Bobby.markdown

A Pen by Bobby

A Pen by Bobby on CodePen.

License.

index.html

<ul class="nav">
  <li><a href="#">link</a></li>
  <li>
    <a href="#">link</a>
    <button class="open-subnav">&times;</button>
    <ul class="subnav">
      <li><a href="#">sublink</a></li>
      <li><a href="#">sublink</a></li>
      <li><a href="#">sublink</a></li>
    </ul>
  </li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

script.js

$(document).ready(function(){
  $('button').click(function() {
    $(this).next().slideToggle();
  });
});

style.scss

@import "compass";
$desktop: "screen and (min-width: 60em)";

*{
  @include box-sizing(border-box); 
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav{
  margin-top: 2em;
  
  > li{
    border-bottom: solid 1px white;
    position: relative;
    
    @media #{$desktop}{
      display: inline-block;
    
      &:hover .subnav{
        display: block;
      }
    }
  }
  
  a{
    background: #369;
    color: white;
    padding: 1em 1.6em;
  }
  
}

.subnav{
  //width: 100%;
  display: none;
  
  @media #{$desktop}{
    position: absolute;
  }
  
  li + li{
    border-top: solid 1px white;
  }
  
  a{
     background: #333; 
  }
}

a{
  display: block;
  text-decoration: none;
}

button{
  background: none;
  border: none;
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  
  @media #{$desktop}{
    display: none;
  }
}