JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" runat="server">
    <div id="wrapper" style="width: 900px; margin: 0 auto;">
        <div id="menu">
            <ul>
                <li>
                    <a href="#">回首頁</a>
                </li>
                <li><a href="#">我的訂單</a>
                    <ul>
                        <li><a href="#">我要開單</a></li>
                        <li><a href="#">訂購紀錄</a></li>
                    </ul>
                </li>
                <li><a href="#">店家菜單</a>
                    <ul>
                        <li><a href="#">菜單列表</a></li>
                        <li><a href="#">新增菜單</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div>
        <table border="1" cellpadding="0" cellspacing="0">
        <tr style="height: 50px;">
            <td style="width:225px;">建立人：<asp:Label ID="Name" runat="server" Text="OOO"></asp:Label></td>
            <td style="width:225px;">建立日期：<asp:Label ID="CreateDate" runat="server" Text=""></asp:Label></td>
            <td style="width:225px;">店家名稱：<asp:TextBox ID="ShopName" runat="server"></asp:TextBox></td>
            <td style="width:225px;">菜單類型：<asp:DropDownList ID="MenuType" runat="server">
                <asp:ListItem>正餐</asp:ListItem>
                <asp:ListItem>點心</asp:ListItem>
                <asp:ListItem>飲料</asp:ListItem>
            </asp:DropDownList></td>
        </tr>
        <tr style="height: 50px;">
            <td>上傳菜單1：<asp:FileUpload ID="FileUpload1" runat="server" /></td>
            <td>上傳菜單2：<asp:FileUpload ID="FileUpload2" runat="server" /></td>
            <td>上傳菜單3：<asp:FileUpload ID="FileUpload3" runat="server" /></td>
            <td>
                <center>
                    <asp:Button ID="submit" runat="server" Text="確認新增" CssClass="btn btn-success" />
                </center>
            </td>
        </tr>
    </table>

CSS

/* ---------- 大小與定位 ---------- */
#menu {
    /* 選單大小 */
    width: 900px;
    height: 30px;
}

    #menu ul {
        /* 取消ul樣式符號 */
        list-style-type: none;
        /* 重設ul邊界與留白為零 */
        margin: 0;
        padding: 0;
        /* 內有浮動元件時，需設overflow才會自動調整大小 */
        overflow: auto;
    }

    * html #menu ul {
        /* 解決IE6不理overflow問題，直接指定高度 */
        height: 30px;
    }

        #menu ul li {
            /* 利用float讓第一層li水平排列 */
            float: left;
        }
        /* 解決IE6條列式餘白問題*/
        * html #menu ul li {
            display: inline;
        }

            #menu ul li a {
                /* 將a改為區塊元件，以便指定寬高 */
                display: block;
                /* 這邊也要設float，否則IE6會以100%寬度顯示 */
                float: left;
                /* 固定高度 */
                height: 30px;
                width: 150px;
                text-align: center;
            }

            #menu ul li ul {
                /* 讓第二層ul跳脫文件流以利定位 */
                position: absolute;
                /* 固定寬度 */
                width: 150px;
                /* 避免出現捲軸 */
                overflow: visible;
                /* 讓ul與母階層li相同位置 */
                clear: left;
                margin-top: 30px;
                margin-right: 0;
                margin-bottom: 0;
                margin-left: 0;
            }
            /* 修正IE7絕對定位差異 */
            *:first-child + html #menu ul li ul {
                margin-top: 0;
            }
            /* 修正IE6絕對定位差異 */
            * html #menu ul li ul {
                margin-top: 0;
            }

                #menu ul li ul li {
                    /* 覆寫繼承自第一層的浮動設定 */
                    float: none;
                    text-align: center;
                }

                    #menu ul li ul li a {
                        /* 覆寫繼承自第一層的浮動設定 */
                        float: none;
                        width: 100%; /* 註：display、height、padding繼承第一層的設定 */
                    }

                    #menu ul li ul li ul...