JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="semester">
    <li><a href="#" class="html">Get HTML version</a></li>
    <li><a href="#" class="pdf">Get PDF version</a></li>
    <li><a href="#" class="xls">Get Excel version</a></li>
</ul>

CSS

#semester {
    background: url('http://cgi.di.uoa.gr/~grad1054/bug/semester.png') no-repeat;
    width: 100px;
    height: 135px;
    margin: 0 auto;
    border: 1px solid #ccc;
}

#semester li {
    float: left;
    margin-top: 100px;
    display: none;
    margin-right: 1px;
}

#semester:hover li {
    display: block;
}

#semester li a {
    width: 32px;
    height: 35px;
    text-indent: -9999px;
    display: block;
    background-image: url('http://cgi.di.uoa.gr/~grad1054/bug/semester1.png');
}

#semester li a.html {
    background-position: 200px 33px;
}

#semester li a.xls {
    background-position: 132px 33px;
}

#semester li a.pdf {
    background-position: 166px 33px;
}