JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-wrapper">
		<div class="main-menu-wrapper">
			<div class="main-menu">
				<ul>
					<li class="m1"><a href="#"><span>會</span>員資料</a></li>
					<li class="m2"><a href="#"><span>訂</span>單資料</a></li>
					<li class="m3"><a href="#"><span>出</span>貨管理</a></li>
				</ul>
			</div>
		</div>
		<div class="sub-menu-wrapper">
			<div class="sub-menu">
				<ul class="sub-memu-0">
					<li><a href="#">查詢會員資料</a></li>
					<li><a href="#">修改會員資料</a></li>
					<li><a href="#">刪除會員資料</a></li>
				</ul>
				<ul class="sub-memu-1">
					<li><a href="#">查詢訂單</a></li>
					<li><a href="#">修改訂單</a></li>
					<li><a href="#">刪除訂單</a></li>
				</ul>
				<ul class="sub-memu-2">
					<li><a href="#">已出貨訂單</a></li>
					<li><a href="#">未出貨訂單</a></li>
				</ul>
			</div>
		</div>
	</div>
    <script>
        $(function () {
            // 先取得相關選單元素及高度
            var $menuWrapper = $('#menu-wrapper'),
                $subMenuWwrapper = $menuWrapper.find('.sub-menu-wrapper').add($menuWrapper.find('.sub-menu')),
                _height = $subMenuWwrapper.height(),
                _animateSpeed = 200;

            // 先把 $subMenuWwrapper 的高度歸 0
            // 並把 .sub-menu ul 先往上移動隱藏
            var $subMenu = $subMenuWwrapper.height(0).find('.sub-menu ul').css({
                top: _height * -1
            });

            // 當滑鼠移入到 .main-menu ul li a 上時
            $('.main-menu ul li a').mouseover(function () {
                // 先取出被滑鼠移入的選單
                // 並取得該選單中第一個 span 的文字顏色
                var $this = $(this),
                    $color = $this.find('span').css('color'),
                    _no = $this.parent().index();

                // 改變 $subMenuWwrapper 的顏色為 $color 並展開高度
                $subMenuWwrapper.css({
                    backgroundColor: $color,
                    borderTopColor: $color
                }).stop().animate({
                    height: _height
                }, _animateSpeed);

                // 移動相對應的子選單
               ...

CSS

<style type="text/css">
        body {
	        margin: 0;
        }
        #menu-wrapper .main-menu , #menu-wrapper .sub-menu {
	        margin: 0 auto;
	        width: 980px;
        }
        #menu-wrapper ul, #menu-wrapper ul li {
	        margin: 0;
	        padding: 0;
	        list-style: none;
        }
        .main-menu ul li, .sub-menu ul li {
	        float: left;
        }
        .main-menu ul li a {
	        color: #000;
	        display: block;
	        margin-right: 50px;
	        padding: 5px 5px 5px 0;
	        text-decoration: none;
        }
        .sub-menu-wrapper {
	        height: 28px;
	        clear: left;
	        background-color: #f90;
	        border-top: 5px solid #f90;	/* 預設使用跟 .c1 一樣的顏色 */
        }
        .sub-menu {
	        height: 28px;
	        position: relative;
	        overflow: hidden;
        }
        .sub-menu ul {
	        position: absolute;
        }
        .sub-menu ul li a {
	        color: #fff;
	        display: block;
	        margin-right: 20px;
	        padding-top: 2px;
	        text-decoration: none;
        }
        /* 自訂子選單的位置 */
        .sub-menu .sub-memu-1 { left: 50px; }
        .sub-menu .sub-memu-2 { left: 170px; }
        .sub-menu .sub-memu-3 { left: 265px; }
        /* 自訂每一個選單的顏色 */
        .main-menu ul li.m1 span, .main-menu ul li.m1 a.selected { color: #f90; }
        .main-menu ul li.m2 span, .main-menu ul li.m2 a.selected { color: #09c; }
        .main-menu ul li.m3 span, .main-menu ul li.m3 a.selected { color: #3c0; }
        .main-menu ul li.m4 span, .main-menu ul li.m4 a.selected { color: #f6f; }
    </style>