JSFiddle - React, Tailwind, and code Playground
HTML
-<div id="erhay-menu">
<ul id="erhaynav">
<li class="erhay-home"><a href="http://wwww.erhay.com"></a></li>
<li><a href="http://wwww.erhay.com">Erhay</a>
<div class="submenu subsub">
<div class="left1">
<div class="submenuleft1"><a href="http://wwww.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Hàn Quốc</a></div>
</div>
<div class="left1">
<div class="submenuleft1"><a href="http://wwww.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Hàn Quốc</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Hàn Quốc 1</a></div>
</div>
<div class="left1">
<div class="submenuleft1"><a href="http://wwww.erhay.com">Bài hát</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Việt Nam</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Âu Mỹ</a></div>
<div class="submenuleft1content"><a href="http://wwww.erhay.com">Hàn Quốc</a></div>
</div>
</div>
</li>
<li><a href="http://wwww.erhay.com">Video</a>
</li>
<li><a href="http://wwww.erhay.com">Nghệ sĩ</a></li>
<li><a href="http://wwww.erhay.com">About</a>
</li>
</ul>
</div>
fgdf
CSS
body{background:#3E3E3E;; margin:0 auto; margin: 40px 0px 0px 0px}
#erhay-menu ul {list-style: none;}
ul#erhaynav {
float: left;
width: 100%;
position: relative;
background: url(http://static.mp3.zdn.vn/skins/mp3_version3_05/images/vline.jpg);
background-repeat: repeat-x;
background-position: 100px -61px;
margin:0 auto;
}
ul#erhaynav li {
padding:0px 7px;
float: left;
height: 35px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}
ul#erhaynav li a {
padding: 7px 15px;
display: block;
color: #474747;
font-weight:bold;
text-shadow:0 1px 0 #fff;
text-decoration: none;
}
ul#erhaynav li:hover {
padding: 0 5px!important;
border-right: 1px solid #dadada;
border-left: 1px solid #dadada;
background-color: white;
}
ul#erhaynav li.erhay-home {
background: url(http://static.mp3.zdn.vn/skins/mp3_version3_05/images/icon-8.png);
width: 25px;
background-position: 0px -5px;
}
ul#erhaynav li.erhay-home:hover
{
border:none !important;
}
ul#erhaynav li.erhay-home a {height:19px;}
ul#erhaynav li div.submenu {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#erhaynav li:hover div.submenu {display: block;}
ul#erhaynav li div.subsub {width:480px;left: 80px; margin-top:-4px; padding: 1px;
border: 1px solid #dbdbdb;
background-color: #fff; position:absolute;}
ul#erhaynav li div.subsub a{color:#474747; font-weight:normal}
.left1{width:159px; float:left; border-right:1px solid #ebebeb}
.submenuleft1{width:159px; padding: 2px 0;border-bottom: 1px solid #ebebeb;background-color: #f5f5f5;color: #333;text-align: center;
font-size: 12px;
line-height: normal;}
.submenuleft1 a{font-size:14px; color:#333; font-weight:bold !important;}
.submenuleft1content{border-bottom:1px solid #ebebeb}
.submenuleft1content:hover{background:#7B4696;}
.submenuleft1content a:hover{color:white !important}