JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li id="logo"><a></a>

    </li>
    <li id="home"><a href="index.html"></a>

    </li>
    <li id="about"><a href="about.html"></a>

    </li>
    <li id="store"><a href="store.html">service</a>
   <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
    </li>
        <li id="service"><a href="service.html"></a>

        </li>
        <li id="contact"><a href="contact.html"></a>

        </li>
        <li id="navbar"><a></a>

        </li>
</ul>

CSS

ul#menu {
    width:1020px;
    list-style:none;
    height:60px;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
ul#menu li {
    display:inline;
}
ul#menu li a {
    height: 60px;
    float:left;
    text-indent: -9999px;
}
ul#menu li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul#menu li#logo a {
    width: 304px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat 0 0;
}
ul#menu li#home a {
    width:61px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -304px 0;
}
ul#menu li#home a:hover {
    background-position:-304px -60px;
}
ul#menu li#about a {
    width:102px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -365px 0;
}
ul#menu li#about a:hover {
    background-position:-365px -60px;
}
ul#menu li#store a {
    width:70px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -467px 0;
}
ul#menu li#store a:hover {
    background-position:-467px -60px;
}
ul#menu li#service a {
    width:84px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -537px 0;
}
ul#menu li#service a:hover {
    background-position:-537px -60px;
}
ul#menu li#contact a {
    width:93px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -621px 0;
}
ul#menu li#contact a:hover {
    background-position:-621px -60px;
}
ul#menu li#navbar a {
    width: 306px;
    background:url(http://oi43.tinypic.com/20h3lmv.jpg) no-repeat -714px 0;
}
ul#menu li ul li {
    background: #555;
    display: block;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
}
ul#menu li ul li:hover {
    background: #666;
}
ul#menu li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}