JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mini-menu">   
    <ul>
        <li><a href="#">Donec tincidunt laoreet</a></li>
        <li><a href="#">Vestibulum elit</a></li>
        <li><a href="#">Etiam pharetra</a></li>
        <li><a href="#">Phasellus placerat</a></li>
        <li><a href="#">Cras et nisi vitae odio</a></li>
    </ul>
</div>

CSS

.mini-menu{
    max-width: 250px;
    margin: 0 auto;
    font: normal 14px 'oswaldbook';
}

ul {
    margin:0;
    padding:0;
    text-align:left;
    list-style-image: url(images/menu-non-act.png);
}

.mini-menu > ul {
    margin-bottom: 300px;
    border: 1px solid #e7e7e7;
}

.mini-menu > ul > li > a {
    display: block; 
    outline: 0; 
    padding: .7em 1em;  
    text-decoration: none;  
    color:#C9C9C9;  
    font-weight: normal;    
    background: #f3f3f3;    
    border-bottom: 1px solid #e7e7e7;
}
.mini-menu > ul > li > a:hover{
    color:#43cae7;
}

.mini-menu ul li {
    list-style-image: url(http://i.piccy.info/i9/46207f01d95868e4595beba3dde10df8/1407087241/997/714285/menu_non_act.png);
    list-style-position: inside;
}

.mini-menu ul li:hover {
    list-style-image: url(http://i.piccy.info/i9/f16ab0df0c2c275f0e6668da03f897b0/1407087217/998/714285/menu_act.png);}
.mini-menu > ul > li > ul {
    counter-reset: items;
    height: 0;
    overflow: hidden;
    background: #eee;
    color: #777;
    font-size: .75em;
}