JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div id="navigation">
		    <ul class="top-level">
		       
                <li><a href="#">Viemärinavaus ja huolto</a>
		            <ul class="sub-level">
		                <li><a href="http://www.lindenleaf.fi/viem%C3%A4rinavausaine/">Viemärinavausrae</a></li>
		                <li><a href="http://www.lindenleaf.fi/hapan-viem%C3%A4rinavausneste/">Hapan-Viemärinavausneste</a></li>
                        </ul>
                              
		           
                      <li><a href="#">Imeytysaineet</a>
                      <ul class="sub-level">
                      <li><a href="http://www.lindenleaf.fi/imeytysaine/">Imeytysjauhe A1</a></li>
                              </ul>
                              
		        <li><a href="#">Jäänsulatusaineet</a>
                 <ul class="sub-level">
		                <li><a href="http://www.lindenleaf.fi/j%C3%A4%C3%A4nsulatusaine/">Jäänsulatusrae</a></li>
                     <li><a href="http://www.lindenleaf.fi/j%C3%A4%C3%A4nsulatusaine-hiekkamurske/">Jäänsulatusrae ja hiekoitusmurske</a>
                                           
                     </li> </ul>
                          </li>
                    </li>
                </li>
            </ul>
                          </div>
                    </body>

CSS

body {
}
#navigation {
    font-size: 0.9em;
    width: 240px;

}
#navigation ul {
    margin: 0;
    padding: 0;
}
ul.top-level {
    background: none repeat scroll 0 0 #FFFFFF;
}
#navigation li {
    list-style: none outside none;
}
ul.top-level li {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-width: 1px;
}
#navigation a {
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 25px;
    text-decoration: none;
    text-indent: 10px;
    width: 100%;
background-image: url('http://www.lindenleaf.fi/kuvat/tuoteikkuna.png');
}

#navigation a:hover {
    text-decoration: underline;
     background-image: url('http://www.lindenleaf.fi/kuvat/tuoteikkuna2.png');
        z-index: 100;
}
#navigation li:hover {

    position: relative;
}
ul.sub-level {
    display: none;
}
li:hover .sub-level {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #FFFFFF;
    display: block;
    left: 200px;
    position: absolute;
    top: 5px;
   
}
ul.sub-level li {
    border: medium none;
    float: left;
    width: 240px;
}
#navigation .sub-level {
    background: none repeat scroll 0 0 #FFFFFF;
}
#navigation .sub-level .sub-level {
    background: none repeat scroll 0 0 #FFFFFF;
}
li:hover .sub-level .sub-level {
    display: none;
    
}
.sub-level li:hover .sub-level {
    display: block;
}