需要在 HTML 和 CSS 中重构的 UI 设计

Question

我希望下拉菜单设计看起来像 [Mega Menu Dropdown] 但设计变得像 [Dropdown]。我的 CSS 很差，我需要你的帮助。

我正在使用 Bootstrap v3.4.1。下面的脚本将用于以我的形式运行我的服务器。

<asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

我期望的设计需要像 [Mega Menu Dropdown] 一样，如图所示。

非常感谢。

这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <nav class="navbar-head">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="facility portal">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" runat="server" href="~/"><strong>PORTAL</strong></a>
                    </div>                
                </div>
            </nav>
            
            <div class="navbar-head2">
                <div class="container-fluid">
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">

                            <li><a href="~/Home" class="navbar-link">HOME</a></li>

                            <li class="dropdown"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">GENERAL <span class="caret"></span></span>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a id="A1" href="#">Chart</a></li>
                                    <li><a id="A2" href="#">Document</a></li>
                                    <li><a id="A3" href="#">Equipment</a></li>
                                    <li><a id="A4" href="#">Utility</a></li>
                                    <li><a id="A5" href="#">Plant</a></li>                            
                                </ul>
                            </li>

                            <li class="nav-item dropdown has-megamenu"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">MODULES <span class="caret"></span></span>
                                <ul role="menu" class="dropdown-menu multi-column columns-4">
                                  <li>
                                    <div class="row">

                                        <div class="col-md-3">
                                            <ul class="multi-column-dropdown">
                                                <li class="dropdown-header">Report</li>
                                                <li><hr class="border-top-3 solid w-100 menu-hr-line" /></li>
                                                <li class="dropdown" data-toggle="dropdown"><span>Daily</span>
                                                    <ul role="menu" class="dropdown-menu submenu">
                                                        <li><a id="A16" href="#">1</a></li>
                                                        <li><a id="A17" href="#">3</a></li>
                                                        <li><a id="A18" href="#">5</a></li>
                                                        <li><a id="A19" href="#">7</a></li>
                                                        <li><a id="A20" href="#">9</a></li>
                                                        <li><a id="A21" href="#">12</a></li>
                                                    </ul>
                                                </li>
                                                <li><a id="A7" href="#">Weekly</a></li>
                                                <li><a id="A8" href="#">Abnormality</a></li>
                                                <li><a id="A9" href="#">Plant</a></li>
                                                <li><a id="A10" href="#">Calibration</a></li>
                                                <li><a id="A11" href="#">Supervising</a></li>
                                            </ul>
                                        </div>

                                        <div class="col-md-3">
                                            <ul class="multi-column-dropdown">
                                                <li class="dropdown-header">Inventory</li>
                                                <li><hr class="solid w-100 menu-hr-line" /></li>
                                                <li><a id="A12" href="#">Items</a></li>
                                            </ul>
                                        </div>

                                        <div class="col-md-3">
                                            <ul class="multi-column-dropdown">
                                                <li class="dropdown-header">Schedule</li>
                                                <li><hr class="solid w-100 menu-hr-line" /></li>
                                                <li><a id="A13" href="#">Master</a></li>
                                            </ul>
                                        </div>

                                        <div class="col-md-3">
                                            <ul class="multi-column-dropdown">
                                                <li class="dropdown-header">Documentation</li>
                                                <li><hr class="solid w-100 menu-hr-line" /></li>
                                                <li><a id="A14" href="#">Equipment</a></li>
                                                <li><a id="A15" href="#">Drawing</a></li>
                                            </ul>
                                        </div>

                                    </div>
                                  </li>
                              </ul>
                            </li>

                            <li><a href="#" class="navbar-link">OFFINE MANAGEMENT SYSTEM</a></li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>

nav li {
    /* remove all the bullets and baked in style - probably should use div set instead */
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.navbar-link {
    color: #000080;
    background-color: deepskyblue;
}

.navbar-head {
    background-color: #000099;
    font-family: Calibri, sans-serif;
}

.navbar-head2 {
    background-color: deepskyblue;
    font-family: Calibri, sans-serif;
    font-size: 18px;
}

.navbar-brand > strong {
    color: white;
    font-size: 3.3rem;
    text-transform: uppercase;
}



.menu-hr-line {
    /* border-top-width: 3px;*/
    border-top-color: #000099;
}

.dropdown.has-megamenu {
    position: static;
}

.dropdown-header {
    color: #050A30;
    font-size: 14px;
    font-weight: bold;
}

.dropdown-menu {
    width: 200px;
}

.dropdown-menu .columns-4 {
    min-width: 1300px;
    background-color: #e6ffff;
}

.dropdown-menu .submenu {
    display: block !important;
    position: absolute;
    left: 50%;
    /*top: 1px;*/
    z-index: 1;
}

.dropdown-menu > li:hover > .submenu {
    display: block;
    z-index: 1;
}

.dropdown-menu li a {
    padding: 5px 15px;
    font-weight: 300;
}

.multi-column-dropdown {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.multi-column-dropdown li a {
    display: block;
    clear: both;
    line-height: 1.324624;
    color: #000C66;
    white-space: normal;
}

.multi-column-dropdown li a:hover {
    text-decoration: none;
    color: cornflowerblue;
    background-color: #f2f2f2;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background-color: #777;
    border-color: #fff;
}