JSFiddle - React, Tailwind, and code Playground
HTML
<ul class='mainMenus'>
<li onclick='showSubMenu("sm_item1")'>
<div style='cursor:auto;font-size:40px; font-family:Segoe,Arial,sans-serif; color:White;padding-bottom:25px; padding-top:10px; padding-left:40px'><a href="#">Click here</a></div>
<ul class='subMenus' id='sm_item1'>
<div style='width:1360px; height:685px;background:#CDDFF4; position:absolute; z-index:9999999999999999999; margin-left:0px; margin-top:-20px'>
<div style='height:580px'>
<div style='width:340px; height:480px; float:left; background:url()'>
<div style='height:75px;width:340px;line-height:75px;text-align:left; font-weight:bold; color:#083047; font-size:13px'>
</div>
<div style='height:45px;width:340px;line-height:45px;text-align:left;padding-left:20px; font-weight:600; color:#083047; font-size:13px'>
<a href='http://www.erhay.com/search/label/AB.M%C3%A1y%20t%C3%ADnh%20%C4%91i%E1%BB%87n%20tho%E1%BA%A1i' style='color:#083047'>Máy tính, điện thoại</a>
</div>
<div style='height:210px; width:340px; background:#72b9fa; padding-top:20px'>
<div class='div-box1'>
<ul>
<li><a href='http://www.erhay.com/search/label/A1.H%C4%90H%20XP'>HĐH XP</a></li>
<li><a href='http://www.erhay.com/search/label/A2.Windows%207'>HĐH Windows 7</a></li>
<li><a href='http://www.erhay.com/search/label/A3.Windows%208'>HĐH Windows 8</a></li>
...
CSS
<!-- Phần CSS cho Menu Click new -->
#div-header .div-header
{
height:45px!important;
width:340px!important;
background:url();
line-height:45px!important;
text-align:left!important;
padding-left:30px!important;
margin-bottom:20px!important;
}
.div-subheader
{
width:170px;
line-height:20px;
font:inherit;
padding-left:40px;
}
.div-subheader a
{
text-decoration:underline;
font-size:12px;
color:white;
font-family:Verdana;
}
.div-header a
{
text-decoration:none;
font-size:13px;
color:white;
font-family:Verdana;
font-weight:bold;
}
.div-box1
{
height:170px; width:160px; float:left; list-style-type:none;padding-left:20px
}
.div-box2
{
height:170px; width:160px; float:left;
}
.div-box1 ul li, .div-box2 ul li
{
list-style-type:none;
text-decoration:none;
padding-bottom: 15px;
}
.div-box1 ul li a, .div-box2 ul li a
{
text-decoration:none;
color:white;
font-family: inherit;
}
.div-box1 li a:hover, .div-box2 ul li a:hover
{
text-decoration:underline;
}
#menu-2{}
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
.mainMenus li {
position: relative}
.subMenus {
display: none;
position: absolute;
top: 20px;
left: 0px;
}
JavaScript
window.onload=function() {
subMenusO = getElementsByClassName(document,'ul','subMenus');
}
function showSubMenu(elemId) {
var dispStatus = (document.getElementById(elemId).style.display == 'block')? 'none' : 'block';
for(var i=0; i < subMenusO.length; i=i+1) {
subMenusO[i].style.display = 'none';
}
document.getElementById(elemId).style.display = dispStatus;
}
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++)
{
oElement = arrElements[i];
if(oRegExp.test(oElement.className))
{
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}