NeonByte NavBar

dabblet.css

/**
 * NeonByte NavBar
 */
body{
background-color: #555555;
}

a {
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
    text-align: center;
}
<;link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
{
}
ul.menu-boxes  a.box{
float:left;
color:white;
font-family: 'Raleway', sans-serif;
background-color: #adf500;
width: 120px;
height: 35px;
z-index: 1;
font-size: 1.5em;
border-left: 1px white solid;

-moz-boxhadow: 1px 1px #3e5800, 2px 2px #3e5800, 3px 3px #3e5800, 4px 4px #3e5800, 5px 5px #3e5800, 6px 6px #3e5800, 7px 7px #3e5800, 8px 8px #3e5800;
-webkit-box-shadow: 1px 1px #3e5800, 2px 2px #3e5800, 3px 3px #3e5800, 4px 4px #3e5800, 5px 5px #3e5800, 6px 6px #3e5800, 7px 7px #3e5800, 8px 8px #3e5800;

-moz-transition: 0.52s ease-out;
-webkit-transition: 0.52s ease-out;
}

ul.menu-boxes a.box:hover{
color:black;
width: 120px;
height: 80px;
background-color: #f5c300;
z-index: 1;
border-left: 1px transparent solid;

-moz-box-shadow: 1px 1px #cea400, 2px 2px #cea400, 3px 3px #cea400, 4px 4px #cea400, 5px 5px #cea400, 6px 6px #cea400, 7px 7px #cea400, 8px 8px #cea400;
-webkit-box-shadow: 1px 1px #cea400, 2px 2px #cea400, 3px 3px #cea400, 4px 4px #cea400, 5px 5px #cea400, 6px 6px #cea400, 7px 7px #cea400, 8px 8px #cea400;

-webkit-animation-name: boxPulse;
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 1.4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0.52s;
}
ul.menu-boxes a.box:active{
background-color: #f54900;
-moz-boxhadow: 1px 1px #ba3700, 2px 2px #ba3700, 3px 3px #ba3700, 4px 4px #ba3700, 5px 5px #ba3700, 6px 6px #ba3700, 7px 7px #ba3700, 8px 8px #ba3700;
-webkit-box-shadow: 1px 1px #ba3700, 2px 2px #ba3700, 3px 3px #ba3700, 4px 4px #ba3700, 5px 5px #ba3700, 6px 6px #ba3700, 7px 7px #ba3700, 8px 8px #ba3700;

-moz-transition: 0.12s ease-out;
-webkit-transition: 0.12s ease-out;
}
@-webkit-keyframes boxPulse {
from {
height: 80px;
}
50%{
height: 90px;
}
}

dabblet.html

<ul class="menu-boxes">
<a class="box" href="#" > Neon</a>
<a class="box" href="#" > Byte</a>
<a class="box" href="#" > Forum</a>
<a class="box" href="#" > Media</a>
<a class="box" href="#" > Profile</a>
<a class="box" href="#" > More</a>
</ul>

dabblet.js

// alert('Hello world!');

settings.json

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