Untitled

dabblet.css

.menu {
  list-style-type: none;
  padding: 10px 0;
  margin: 0;
  background: linear-gradient(90deg, yellow 40px, rgba(0,0,0,0) 40px);;
}

.menuitem {
  margin-top: 50px;
  margin-left: 10px;
  transition: 0.2s;
}

.menuitem:hover {
  margin-left: 20px;
}

a {
  text-decoration: none;
  color: white;
  background-color: purple;
  padding: 2px 20px 2px 5px;
  border: 1px solid black;
  transition: .8s;
}

a:hover {
  background-color: red;
 }

dabblet.html

<nav>
  <ul class="menu">
    <li class="menuitem"><a href="">Agenda</a></li>
    <li class="menuitem"><a href="">Drugsbeleid</a></li>
    <li class="menuitem"><a href="">Kaartverkoop</a></li>
    <li class="menuitem"><a href="">Line-up</a></li>
	<li class="menuitem"><a href="">Praktische informatie</a></li>
	<li class="menuitem"><a href="">Contact</a></li>
  </ul>
</nav>

dabblet.js

// alert('Hello world!');

settings.json

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