JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="Width=device-Width, initial-scale=1">
<link href="menu-vertical.css" rel="stylesheet" type="text/css" />
<style>
:root {
--LeftSide: 50;
}
#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative;
font-size:0;
list-style: none;
padding: 0;
display:block;
margin-left: calc(var(--LeftSide) * 1px);
margin-top: 40px!important;
z-index:9;
}
#menu-v ul
{
width: 180px; /* Main Menu Item widths */
border: 1px solid #ccc;
border-top:none;
position: relative;
font-size:0;
list-style: none;
padding: 0;
display:block;
margin: 0;
z-index:9;
}
/* Top level menu links style
---------------------------------------*/
#menu-v li
{
background: #FFF url(bg.gif) repeat-x 0 2px;
list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
font: normal 12px Arial;
border-top: 1px solid #ccc;
display: block;
/*overflow: auto; force hasLayout in IE7 */
color: black;
text-decoration: none;
line-height:26px;
padding-left:26px;
}
#menu-v ul li a
{
line-height:30px;
}
#menu-v li a.arrow:hover
{
background-image:url(arrowon.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{
position: absolute;
width: 200px; /*Sub Menu Items width */
visibility:hidden;
}
#menu-v a.arrow
{
background-image:url(arrow.gif);
background-repeat: no-repeat;
background-position: 97% 50%;
}
#menu-v li:hover, #menu-v li.onhover
{
background-position:0 -62px;
}
#menu-v ul li
{
background: rgba(255, 255, 255,...