<hr><font id="1" color="red" size="+9" >1</font>

  <ul>

    <li class="white" onclick="play()"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li><li class="black"></li><li class="white"></li></ul>

<font size="-1">1 &nbsp;2&nbsp;3&nbsp;4 &nbsp;5&nbsp;6&nbsp;7&nbsp;8</font>

function play(){

  var x=document.getElementById("1")

  x.style.display="inline"

}

li{

  display:inline-block;

  height:75px;

  width:20px;

}

.black{

  background:black;

  height:59px;

  margin-bottom:15px;

}

.white{

  height:72;

  border:1px solid;

  border-right:1px solid;

}

div{

  border:1px solid;

}

li:hover{

  background:rgba(0,0,0,0.5);

}

ul{

  padding:0px;

  border:1px solid;

font{

  display:block;

  border:1px solid;

  text-align:center;

}