JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <nav>
     <ul class="main-menu">
		<li class="member"><a href="#">สมัครสมาชิก</a></li>
		<li class="member"><a href="#">เข้าสู่ระบบ</a></li>    
         <li class="submenu_header"><a href="#">ข่าวไอที</a>
         	<ul>
				 <li class="submenu"><a href="#">ข่าวไอทีวันนี้</a></li>
				 <li class="submenu"><a href="#">ตลาดโลกไอที</a></li>
				 <li class="submenu"><a href="#">รู้ทันไอที</a></li>
				 <li class="submenu"><a href="#">สกรุ๊ปไอที</a></li>
				 <li class="submenu"><a href="#"></a></li>
             </ul>
             <div>asdasdasdasd</div>
         </li>

         <li class="submenu_header"><a href="#">เทคโนโลยี</a>
			<ul>
				<li class="submenu"><a href="#">มือถือ & แท็บเล็ต</a></li>
				<li class="submenu"><a href="#">คอมพิวเตอร์</a></li>
				<li class="submenu"><a href="#">กล้องดิจิตอล</a></li>
				<li class="submenu"><a href="#"></a></li>
         	</ul>

         </li>

         <li class="submenu_header"><a href="#">App & Software</a>
             <ul>
				<li class="submenu"><a href="#">IOS</a></li>
				<li class="submenu"><a href="#">Andoind</a></li>
				<li class="submenu"><a href="#">Application</a></li>
				<li class="submenu"><a href="#">Software</a></li>
			</ul>
         </li>

         <li class="submenu_header"><a href="#">รีวิว & พรีวิว</a>
             <ul>
	             <li class="submenu"><a href="#">มอเตอร์โชว์</a></li>
	             <li class="submenu"><a href="#">เทคโนโลยีล้ำยุค</a></li>
	             <li class="submenu"><a href="#">แก็ดเกต</a></li>
	             <li class="submenu"><a href="#">เกมส์เมอร์</a></li>
             </ul>
         </li>

         <li class="submenu_header"><a href="#">บริการของเรา</a>
             <ul>
				<li class="submenu"><a href="#">ช๊อปปิ้ง</a></li>
				<li class="submenu"><a href="#">เว็บดีไซน์</a></li>
				<li class="submenu"><a href="#">แอพพริเคชั่น</a></li>
				<li class="submenu"><a href="#">เว็บบอร์ด</a></li>
             </ul>
         </li>
        </ul>
    </nav>
</header>

CSS

body{
	padding: 0px;
	margin: 0px;
}
header{
	 background: #fb887c;
}
header nav{
	width: 960px;
	height: 50px;
	margin: 0 auto;

}
header nav ul{
	margin: 0px;
	padding: 0px;
}
header nav ul li{
	position: relative;
	list-style: none;
	float: left;
	transition: all 0.3s;
}
header nav > ul li:hover{
	position: relative;
	list-style: none;
	float: left;
	background: #333;
}

header nav ul li a{
	font-size: 14px;
	display: block;
	line-height: 50px;
	padding: 0 10px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
header nav > ul li:hover a{
	overflow: visible;
}

header nav ul li.submenu_header ul{
	position: absolute;
	width: 200px;
	top: 50px;

    opacity: 0;
      visibility: hidden;
	background: #333;
	transition: all 0.3s;
  -webkit-transform: translate3d(0,30px,0);
          transform: translate3d(0,30px,0);
    -webkit-backface-visibility: hidden;
}

header nav ul li.submenu_header ul li{
	float: none;
	transition: all 0.3s;
}
header nav ul li.submenu_header ul li:hover{
	background: #111;
}

header nav ul li.submenu_header ul li a{
	font-size: 13px;
	line-height: 35px;

}
header nav ul li.submenu_header:hover ul{
	opacity: 1;
    visibility: visible;
   }
header nav ul li.submenu_header ul div{
      -webkit-transform: translate3d(0,0,0) rotate3d(0,0,0,0) !important;
          transform: translate3d(0,0,0) rotate3d(0,0,0,0) !important;
}