I am trying to show a css animation when hovering on `nav li a`. So far I have tried several different examples on how to show and hide information from different elements but can get mine to work. Here is the CSS and HTMl, I do not provide any `jS` or `jQuery` since I could get any to work but below you have a `jsfiddle` ready to go. All help highly appreciated. 

```
        .box {
      -webkit-animation: dropdownbar 1s ease;
      -moz-animation:    dropdownbar 1s ease;
      -o-animation:      dropdownbar 1s ease;
      animation:         dropdownbar 1s ease;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      width:100%;
      background-color:#000;
      color:#fff

    }

    @-webkit-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-moz-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @-o-keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }
    @keyframes dropdownbar {
      0%   { height: 0px; }
      100% { height: 35px; }
    }

        <nav class="nav">
        <ul>
        <li class="navLink"><a href="#">Home</a></li>
        <li class="navLink"><a href="#">Away</a></li>    
        </ul>
        </nav>

        <div class="box">this should show only when hovering li element</div>

```

[**FIDDLE**](http://jsfiddle.net/v2w77/)