Untitled

dabblet.css

ul {position: relative;margin: 0;padding: 0;}li {display: inline-block;width: 100px;text-align: center;border-bottom: 5px solid #ccc;}li.blue:hover ~ div {left: 200px;background: blue;}li.green:hover ~ div {left: 100px;background: green;}li.red:hover ~ div{background: red;left: 0;}div {position: absolute;height: 5px;top: 17px;width: 100px;transition: all 1s ease;left: 0;}

dabblet.html

<section class="menu">    
<ul>                <li class="red">Hey</li><li class="green">Hello</li><li class="blue" >World</li>    
                <div></div>      
              </ul></section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}