A Pen by Jean-Philippe Sirois.

Dead-simple-CSS-only-dropdown.markdown

Dead simple CSS only dropdown

A Pen by Jean-Philippe Sirois on CodePen.

License.

index.html

<h1>Dead simple CSS only dropdown</h1>
<p>With JS Improved Keyboard Accessibility if needed</p>

<nav>
  <ul>
    <li><a  href="javascript:">Menu A</a></li>
    <li>
      <span>Menu B</span>
      <ul>
        <li><a href="javascript:">Option B1</a></li>
        <li><a href="javascript:">Option B2</a></li>
        <li><a href="javascript:">Option B3</a></li>
      </ul>
    </li>
    <li>
      <span>Menu C</span>
      <ul>
        <li><a href="javascript:">Option C1</a></li>
        <li><a href="javascript:">Option C2</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:">Menu D</a>
    </li>
  </ul>
</nav>

script.js

var $focused, $blurred, $navFirstLi = $('nav ul li');

// Better focus support on link
$('nav ul ul li a').on('keyup', function(e) { 
  if (e.which === 9) { 
    $focused = $(this).parent().parent().parent()
    if ($blurred) {
      if ($focused != $blurred)
        $blurred.removeClass('is-active')      
    }
    $focused.addClass('is-active') 
  } 
}).on('blur',function() {
  $blurred = $(this).parent().parent().parent()
})

$('nav > ul > li > a').on('keyup', function(e) { 
  if (e.which === 9)
    $navFirstLi.removeClass('is-active')
})

style.sass

@import "compass"
body
  font-family: 'Helvetica Neue'
  padding: 0 20px

nav
  & > ul
    font-size: 0
  ul
    padding: 0
    list-style-type: none
    ul
      position: absolute
      left: -99999px
      li
        display: block
    & > li
      &:hover ul,
      &.is-active ul
        left: 0
  li
    display: inline-block
    font-size: 14px
    font-size: 1.4rem
    position: relative
  a, span
    display: block
    color: darkblue
    text-decoration: none
    padding: 4px 12px
    background: #eee
    white-space: nowrap
    position: relative
  a:hover,
  a:focus
    outline: 0
    background: #ddd