Menu Issues

HTML

<body>
  <div id="menu">
    <span id="ab"><a>about</a></span>
    <span id="ms"><a>music</a></span>
    <span id="ct"><a>contact</a></span>
  </div>
</body>

CSS

body {
  background: #000
}

#menu {
  position: absolute;
  height: 40px;
  margin: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}

#menu span {
  width: 40px;
  height: 6px;
  left: 0;
  background: white;
  display: block;
  text-align: center;
  position: absolute;
  transition: all .3s ease-in-out
}

#menu a {
  color: white;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  bottom: 3px;
  font-size: 30px;
  text-align: center;
  transition: opacity .1s ease-in-out .1s, font-size .1s, visibility 0s linear 0s;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: default
}

#ab {
  margin-top: 6px
}

#ms {
  margin-top: 18px
}

#ct {
  margin-top: 30px
}

.a > #ab {
  margin-top: 30px
}

.a > #ms {
  margin-top: 30px;
  left: 120px
}

.a > #ct {
  margin-top: 30px;
  left: 240px
}

.a > #ab > a {
  opacity: 100;
  visibility: visible
}

.a > #ms > a {
  opacity: 100;
  visibility: visible
}

.a > #ct > a {
  opacity: 100;
  visibility: visible
}

#menu a:hover {
  font-size: 36px
}

JavaScript

var menu = $('#menu');
  menu.click(function() {
    menu.toggleClass('a');
  });