JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<div>
<ul>
	<li><a href="">Menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
	<li><a href="">Menu with different width</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href ="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>    
    </li>
	<li><a href="">Menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
	<li><a href="">Menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
	<li><a href="">Menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>    
    </li>
	<li><a href="">Menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
	<li><a href="">Menu long</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
	<li><a href="">Longer menu</a>
		<ul>
			<li><a href="">Menu item 1</a></li>
			<li><a href="">Menu item 2</a></li>
			<li><a href="">Menu item 3</a></li>
		</ul>
	</li>
</ul>
</div>

CSS

body, html {
    margin:0;
    padding:0;
}
ul {
    list-style:none;
    padding:0;
    margin:20px 0 0 0px;
    width:auto;
    height:auto;
}
ul>li {
    float:left;
    position:relative;
}
ul>li>a, ul>li>ul>li>a {
    display:block;
    text-align:center;
    height:auto;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background:#428db0;
    color:#fff;
    font-family:Arial;
    font-size:12px;
    text-transform:uppercase;
    text-decoration:none;
    padding:10px 13px;
}
ul>li>a {
    width:auto;
}
ul>li>a:hover, ul>li>ul>li>a:hover {
    background:#296784;
}
ul>li>ul {
    position:absolute;
    width:auto;
    height:auto;
    list-style:none;
    margin:0;
    padding:0;
    display:none;
}
ul>li:hover>ul {
    display:block;
}
ul>li>ul>li>a {
    width:250px;
}
ul>li>ul>li>a:last-child {
    border:none;
}
ul>li>ul>li {
    border-bottom:1px solid #fff;
}
ul>li>ul>li:first-child {
    border-top:1px solid #fff;
}
div {
    position:relative;
    width:1050px;
    height:20px;
    margin:10px;
}

JavaScript

$("div > ul > li").each(function () {
var coef = $("div > ul > li").last().position().left / ($(this).children("ul").width() -  $(this).width());
$(this).children("ul").css("left", ($(this).position().left / coef) * (-1));
 });