JSFiddle - React, Tailwind, and code Playground

HTML

<div class="usernav clear">
				<ul>
					<li>
						menu A
						<ul>
							<li>Menu A1 wdawd</li>
							<li>Menu A2</li>
						</ul>
					</li>
					<li>
						menu B
						<ul>
							<li>MenuBasasdasd</li>
							<li>Menu B2</li>
						</ul>
					</li>
					<li>
						menu C
						<ul>
							<li>Menu C1</li>
							<li>Menu C2</li>
						</ul>
					</li>
				</ul>
			</div>

CSS

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
}
.usernav{
	position: relative;
	z-index: 2;
	font-size: 110%;
	background-color: #f4f4f4;
}

.usernav ul {
	float: right;
}

.usernav li {
	position: relative;
	float: right;
	list-style: none;
	padding: 1em;
}

.usernav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	right: 0; /*left or right*/
}

.usernav li li{
	background-color: #ddd;
	float: none; 
}

.usernav li:hover,
.usernav li:hover ul{
	-webkit-box-shadow: 0px 0px 1.5em #dadbdd;
    -moz-box-shadow: 0px 0px 1.5em #dadbdd;
    box-shadow: 0px 0px 1.5em #dadbdd;
}

.usernav li:hover ul {
	display: block;
}

.usernav li:hover,
.usernav li:hover li{
	cursor: default;
	background-color: #fff;
}

.usernav li:hover li{
	box-shadow: none;
}