JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "menu-area">
    <ul id = "menu">
        <li>Menu item #1</li>
        <li>Menu item #2</li>
        <li class = "active" >Menu item #3<img src = "images/menu_arrow.png" />
            <ul class = "submenu">
                <li>Submenu item #1</li>
                <li>Submenu item #2</li>
                <li>Submenu item #3 which could be quite long</li>
                <li>Submenu item #4</li>
                <li>Submenu item #5</li>
            </ul>
        </li>
        <li>Menu item #4<img src = "images/menu_arrow.png" /></li>
        <li>Menu item #5</li>
    </ul>
</div>

CSS

#menu-area{
		position: relative;
		width: 200px;
		height: 430px;
		margin-top: 20px;
		background: url('../images/gradient_menuarea.png') repeat-x;
	}
#menu-area ul{
	list-style-type: none;
	padding: 4px;
	border: 2px solid #94AA13;
	border-radius: 6px;
	font-size: 0.915em;
}
#menu-area ul#menu{
	position: relative;
	width: 160px;
	top: 20px;
	margin: 0px auto 0px auto;
}
#menu-area ul#menu > li{
	position: relative;
	width: 140px;
	height: 36px;
	line-height: 36px;
	padding-left: 20px;
	margin: 0px 0px 4px 0px;
	background: url('../images/gradient_menuboxes_dark.png') repeat-x;
    background-color: #293720;
	border-radius: 4px;
	color: #F2F2F2;
	cursor: pointer;
	list-style-type: none;
}
#menu-area ul#menu li:last-child, #menu-area ul#menu li ul.submenu li:last-child{
	margin: 0px;
}
#menu-area ul#menu li:hover, #menu-area ul#menu li.active, #menu-area ul#menu li ul.submenu li:hover{
	background-image: url('../images/gradient_menuboxes_light.png');
}
#menu-area ul#menu li img{
	position: relative;
	float: right;
    width: 22px;
    height: 22px;
	margin: 6px 4px 0px 0px;
}
#menu-area ul#menu li ul.submenu{
	position: absolute;
	min-width: 160px;
	min-height: 36px;
	top: -4px;
	left: 170px;
	background: url('../images/gradient_menuarea.png') repeat-x;
}
#menu-area ul#menu li ul.submenu li{
	position: relative;
	min-width: 160px;
	height: 36px;
	line-height: 36px;
	padding-left: 20px;
	margin: 0px 0px 4px 0px;
	padding-right: 20px;
	background: url('../images/gradient_menuboxes_dark.png') repeat-x;
    background-color: #293720;
	border-radius: 4px;
	color: #F2F2F2;
	cursor: pointer;
	list-style-type: none;
}
#menu-area ul#menu li ul.submenu li img{
	position: relative;
	float: right;
    width: 22px;
    height: 22px;
	margin: 6px -14px 0px 0px;
}