Add sub menu to DropDown menu in Bootstrap

akhter
 
on Apr 15, 2022 11:25 PM
Sample_101783.zip
590 Views

I want to add sub menu in dropdownlist Item Master File BB, has more list.

master page html

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>

            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <%--<link href="assets/css/notif1.css" rel="stylesheet" />
            <link href="assets/css/notif2.css" rel="stylesheet" />
            <script src="assets/js/Notfic1.js"></script>
            <script src="assets/js/notfic2.js"></script>--%>
            <style>
                body {
                    font-family: Arial, Helvetica, sans-serif;
                }

                .navbar1 {
                    overflow: hidden;
                    background-color: #00ffff;
                }

                    .navbar1 a {
                        float: left;
                        font-size: 12px;
                        color: brown;
                        text-align: center;
                        padding: 12px 14px;
                        text-decoration: none;
                    }

                .dropdownNew {
                    float: left;
                    overflow: hidden;
                }

                    .dropdownNew .dropbtn {
                        font-size: 12px;
                        border: none;
                        outline: none;
                        color: brown;
                        padding: 14px 16px;
                        background-color: inherit;
                        font-family: inherit;
                        margin: 0;
                    }

                    .navbar1 a:hover, .dropdownNew:hover .dropbtn {
                        background-color: orangered;
                    }

                .dropdown-content {
                    display: none;
                    position: absolute;
                    background-color: #fcfafa;
                    min-width: 160px;
                    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                    z-index: 1;
                }

                    .dropdown-content a {
                        float: none;
                        color: blue;
                        padding: 12px 16px;
                        text-decoration: none;
                        display: block;
                        text-align: left;
                    }

                        .dropdown-content a:hover {
                            background-color: #ddd;
                        }

                .dropdownNew:hover .dropdown-content {
                    display: block;
                }
            </style>
            <asp:ContentPlaceHolder ID="head" runat="server">
            </asp:ContentPlaceHolder>
        </head>
        <body>
            <div class="navbar1">
                <%--  <a href="#home">Home</a>
                    <a href="#news">News</a>--%>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        MasterFiles
                <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="ItemOpenForm.aspx">Item Master File SB</a>
                        <a href="itemBB.aspx">Item Master File BB</a>
                        <a href="BBtype.aspx">Bigbale Type</a>
                        <a href="itemcat.aspx">Item Category File</a>
                        <a href="CusItemopen.aspx">Item Customer File</a>
                        <a href="loccat.aspx">Rags Master</a>
                        <a href="adsup.aspx">Rags Supplier</a>
                        <a href="addcust.aspx">Main Customer File</a>
                        <a href="CustomerOpen.aspx">Customer</a>
                        <a href="Section.aspx">Section</a>
                        <a href="ImportOD.aspx">Import</a>
                        <a href="asgnitem.aspx">BigBale Assign Item</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Order
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="SalesOrder.aspx">Small Bale Sales Detail</a>
                        <a href="AllOrderStatus.aspx">Small Bale Order Status</a>
                        <a href="SOInputFrm.aspx">New SB Sales Order</a>
                        <a href="Wiperorder.aspx">New Wiper Order</a>
                        <a href="wiporlst.aspx">Wiper Order List</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        SmallBale
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="SBinputForm.aspx">Small Bale</a>
                        <a href="DuplicateSBPR.aspx">Duplicate Print</a>
                        <a href="scnbl.aspx">Machine Scan</a>
                        <%--     <a href="sbpack.aspx">Pack </a>--%>
                        <a href="DailySBProduce.aspx">Daily Production</a>
                        <a href="OrderRefSBProduction.aspx">Order Wise Status(QTY)</a>
                        <a href="ordwweigt.aspx">Order Wise Status(Weight)</a>
                        <a href="sbdaywise.aspx">Day Wise Status(QTY)</a>
                        <a href="DayWiseProdSB.aspx">Item Day Wise Status</a>
                        <a href="WorkerProductivity.aspx">Worker Productivity</a>
                        <a href="AllItemView.aspx">All Items</a>
                        <a href="TransferOrder.aspx">Bale Transfer</a>
                        <a href="RepackingForm.aspx">Repacking</a>
                        <a href="CustomerWisepb.aspx">CustomerWiseBale</a>
                        <a href="MonthwiseSB.aspx">Month Wise Small Bale</a>
                        <a href="SpiltExcel.aspx">Spilt Excel</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Dispatch
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="sbpack.aspx">Pack Form </a>
                        <a href="packlst.aspx">Pack List </a>
                        <a href="Pckdel.aspx">Pack Delete </a>
                        <a href="Packtrans.aspx">Pack Transfer </a>
                        <a href="AllOrderStatus.aspx">Order Packed Status</a>
                        <a href="SBDisAdd.aspx">Dispatch Form </a>
                        <a href="SBDislst.aspx">Dispatch List </a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Reports
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="yeildopn.aspx">All Report</a>
                        <a href="Wiprep.aspx">Wiper Report</a>
                        <a href="Wipersup.aspx">Wiper Item Suppler Wise</a>
                        <a href="Dailrpt.aspx">Daily Summary</a>
                        <a href="secrpt.aspx">Section Status</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        BigBale
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="BBInputForm.aspx">BigBale_Input</a>
                        <a href="BBBck.aspx">Back Entry</a>
                        <a href="BigbaleCat.aspx">Daily Production</a>
                        <a href="BBSumary.aspx">Daily Production Summary</a>
                        <%--           <a href="DispatchBB.aspx">Dispatch</a>
                        <a href="BBDisList.aspx">Dispatch List</a>--%>
                        <a href="BBsktrd.aspx">Stock</a>
                        <a href="BBDEl.aspx">Delete Bale</a>
                        <%--    <a href="BBchk.aspx">Scan Bale</a>--%>
                        <a href="BBIsuM.aspx">Item Transfer</a>
                        <a href="RagsDispatch.aspx">Rags Transfer List</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Rags
                    <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <%--     <a href="ContOpening.aspx">Container Opening Form</a>--%>
                        <a href="Confrm.aspx">Import Form</a>
                        <a href="Issurg.aspx">Daily Issuance Form</a>
                        <a href="DlyIsueRpt.aspx">Daily Rags Issuance Detail</a>
                        <a href="DailyContainerRecevingReport.aspx">Container Receiving Report</a>
                        <a href="issuragsum.aspx">Rags Summary</a>
                        <a href="RagsCOnsume.aspx">All Rags Status</a>
                        <a href="imppur.aspx">Purchasing</a>
                        <a href="RagsDispatch.aspx">Dispatch list</a>
                        <a href="RagsDispMaster.aspx">Dispatch</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        HR
                <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="employee.aspx">Employee File</a>
                        <a href="timeregal.aspx">Time Register(V)</a>
                        <a href="timereg.aspx">Time Register(H)</a>
                        <a href="empreg.aspx">Attendance Register</a>
                        <a href="attreg2.aspx">Attendance Status</a>
                        <a href="timein.aspx">Time</a>
                        <a href="salgen.aspx">Salary Generate</a>
                        <a href="salsum.aspx">Salary Summary</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Inventory
            <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="DCfrm.aspx">DC Form</a>
                        <a href="DClist.aspx">DC List</a>
                        <a href="COAOpn.aspx">Supplier Form</a>
                        <a href="GrnFrm2.aspx">GRN</a>
                        <a href="GrnFrm.aspx">General GRN</a>
                        <a href="GRNLst.aspx">GRN List</a>
                        <a href="issfrm.aspx">Issuance Form</a>
                        <a href="itemi.aspx">Item Form</a>
                        <a href="Invstk.aspx">Stock</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Wiper
            <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="Wipopn.aspx">Wiper Receving Form</a>
                        <a href="wiplst.aspx">Wiper List</a>
                        <a href="Wipconsum.aspx">Wiper Issuance</a>
                        <a href="WIpbb.aspx">Wiper Bale Form</a>
                        <a href="wiprpt.aspx">Wiper Report</a>
                    </div>
                </div>
                <div class="dropdownNew">
                    <button class="dropbtn">
                        Invoice
        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="invfm.aspx">Invoice Creating Form</a>
                        <a href="invlst.aspx">Invoice List</a>
                    </div>
                </div>
                <a href="DashBoard.aspx">DashBoard</a>
                <a href="LogingForm.aspx">Logout</a>
            </div>
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </body>
        </html>
    </form>
</body>
</html>
Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Apr 16, 2022 05:50 AM
on Apr 16, 2022 05:53 AM

Hi Akhter,

Please refer below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        .navbar1 {
            overflow: hidden;
            background-color: #00ffff;
        }

            .navbar1 a {
                float: left;
                font-size: 12px;
                color: brown;
                text-align: center;
                padding: 12px 14px;
                text-decoration: none;
            }

        .dropdownNew {
            float: left;
            overflow: hidden;
        }

            .dropdownNew .dropbtn {
                font-size: 12px;
                border: none;
                outline: none;
                color: brown;
                padding: 14px 16px;
                background-color: inherit;
                font-family: inherit;
                margin: 0;
            }

            .navbar1 a:hover, .dropdownNew:hover .dropbtn {
                background-color: orangered;
            }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #fcfafa;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }

            .dropdown-content a {
                float: none;
                color: blue;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }

                .dropdown-content a:hover {
                    background-color: #ddd;
                }

        .dropdownNew:hover .dropdown-content {
            display: block;
            width:32%;
        }

        #nav ul ul {
            display: none;
        }

        #nav ul li:hover ul {
            display: block;
            position: absolute;
            background-color: #ddd;
        }
         #nav ul li:hover ul {
            display: block;
            position: absolute;
            background-color: #ddd;
            margin-left:42%;
        }
    </style>   
</head>
<body>
    <form id="form1" runat="server">
        <div id="nav" class="navbar1">
            <div class="dropdownNew">
                <button class="dropbtn">
                    MasterFiles
                <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <ul>
                        <li><a href="ItemOpenForm.aspx">Item Master File SB <i class="fa fa-caret-right"></i></a>
                            <ul>
                                <li><a href="#">Item Master</a></li>
                                <li><a href="#">Item Master BB</a></li>
                            </ul>
                        </li>
                        <li><a href="itemBB.aspx">Item Master File BB</a></li>
                        <li><a href="BBtype.aspx">Bigbale Type</a></li>
                        <li><a href="itemcat.aspx">Item Category File</a></li>
                        <li><a href="CusItemopen.aspx">Item Customer File</a></li>
                        <li><a href="loccat.aspx">Rags Master</a></li>
                        <li><a href="adsup.aspx">Rags Supplier</a></li>
                        <li><a href="addcust.aspx">Main Customer File</a></li>
                        <li><a href="CustomerOpen.aspx">Customer</a></li>
                        <li><a href="Section.aspx">Section</a></li>
                        <li><a href="ImportOD.aspx">Import</a></li>
                        <li><a href="asgnitem.aspx">BigBale Assign Item</a></li>
                    </ul>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Order
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="SalesOrder.aspx">Small Bale Sales Detail</a>
                    <a href="AllOrderStatus.aspx">Small Bale Order Status</a>
                    <a href="SOInputFrm.aspx">New SB Sales Order</a>
                    <a href="Wiperorder.aspx">New Wiper Order</a>
                    <a href="wiporlst.aspx">Wiper Order List</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    SmallBale
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="SBinputForm.aspx">Small Bale</a>
                    <a href="DuplicateSBPR.aspx">Duplicate Print</a>
                    <a href="scnbl.aspx">Machine Scan</a>
                    <%--     <a href="sbpack.aspx">Pack </a>--%>
                    <a href="DailySBProduce.aspx">Daily Production</a>
                    <a href="OrderRefSBProduction.aspx">Order Wise Status(QTY)</a>
                    <a href="ordwweigt.aspx">Order Wise Status(Weight)</a>
                    <a href="sbdaywise.aspx">Day Wise Status(QTY)</a>
                    <a href="DayWiseProdSB.aspx">Item Day Wise Status</a>
                    <a href="WorkerProductivity.aspx">Worker Productivity</a>
                    <a href="AllItemView.aspx">All Items</a>
                    <a href="TransferOrder.aspx">Bale Transfer</a>
                    <a href="RepackingForm.aspx">Repacking</a>
                    <a href="CustomerWisepb.aspx">CustomerWiseBale</a>
                    <a href="MonthwiseSB.aspx">Month Wise Small Bale</a>
                    <a href="SpiltExcel.aspx">Spilt Excel</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Dispatch
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="sbpack.aspx">Pack Form </a>
                    <a href="packlst.aspx">Pack List </a>
                    <a href="Pckdel.aspx">Pack Delete </a>
                    <a href="Packtrans.aspx">Pack Transfer </a>
                    <a href="AllOrderStatus.aspx">Order Packed Status</a>
                    <a href="SBDisAdd.aspx">Dispatch Form </a>
                    <a href="SBDislst.aspx">Dispatch List </a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Reports
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="yeildopn.aspx">All Report</a>
                    <a href="Wiprep.aspx">Wiper Report</a>
                    <a href="Wipersup.aspx">Wiper Item Suppler Wise</a>
                    <a href="Dailrpt.aspx">Daily Summary</a>
                    <a href="secrpt.aspx">Section Status</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    BigBale
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="BBInputForm.aspx">BigBale_Input</a>
                    <a href="BBBck.aspx">Back Entry</a>
                    <a href="BigbaleCat.aspx">Daily Production</a>
                    <a href="BBSumary.aspx">Daily Production Summary</a>
                    <%--           <a href="DispatchBB.aspx">Dispatch</a>
                        <a href="BBDisList.aspx">Dispatch List</a>--%>
                    <a href="BBsktrd.aspx">Stock</a>
                    <a href="BBDEl.aspx">Delete Bale</a>
                    <%--    <a href="BBchk.aspx">Scan Bale</a>--%>
                    <a href="BBIsuM.aspx">Item Transfer</a>
                    <a href="RagsDispatch.aspx">Rags Transfer List</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Rags
                    <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <%--     <a href="ContOpening.aspx">Container Opening Form</a>--%>
                    <a href="Confrm.aspx">Import Form</a>
                    <a href="Issurg.aspx">Daily Issuance Form</a>
                    <a href="DlyIsueRpt.aspx">Daily Rags Issuance Detail</a>
                    <a href="DailyContainerRecevingReport.aspx">Container Receiving Report</a>
                    <a href="issuragsum.aspx">Rags Summary</a>
                    <a href="RagsCOnsume.aspx">All Rags Status</a>
                    <a href="imppur.aspx">Purchasing</a>
                    <a href="RagsDispatch.aspx">Dispatch list</a>
                    <a href="RagsDispMaster.aspx">Dispatch</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    HR
                <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="employee.aspx">Employee File</a>
                    <a href="timeregal.aspx">Time Register(V)</a>
                    <a href="timereg.aspx">Time Register(H)</a>
                    <a href="empreg.aspx">Attendance Register</a>
                    <a href="attreg2.aspx">Attendance Status</a>
                    <a href="timein.aspx">Time</a>
                    <a href="salgen.aspx">Salary Generate</a>
                    <a href="salsum.aspx">Salary Summary</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Inventory
            <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="DCfrm.aspx">DC Form</a>
                    <a href="DClist.aspx">DC List</a>
                    <a href="COAOpn.aspx">Supplier Form</a>
                    <a href="GrnFrm2.aspx">GRN</a>
                    <a href="GrnFrm.aspx">General GRN</a>
                    <a href="GRNLst.aspx">GRN List</a>
                    <a href="issfrm.aspx">Issuance Form</a>
                    <a href="itemi.aspx">Item Form</a>
                    <a href="Invstk.aspx">Stock</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Wiper
            <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="Wipopn.aspx">Wiper Receving Form</a>
                    <a href="wiplst.aspx">Wiper List</a>
                    <a href="Wipconsum.aspx">Wiper Issuance</a>
                    <a href="WIpbb.aspx">Wiper Bale Form</a>
                    <a href="wiprpt.aspx">Wiper Report</a>
                </div>
            </div>
            <div class="dropdownNew">
                <button class="dropbtn">
                    Invoice
        <i class="fa fa-caret-down"></i>
                </button>
                <div class="dropdown-content">
                    <a href="invfm.aspx">Invoice Creating Form</a>
                    <a href="invlst.aspx">Invoice List</a>
                </div>
            </div>
            <a href="DashBoard.aspx">DashBoard</a>
            <a href="LogingForm.aspx">Logout</a>
        </div>
    </form>
</body>
</html>

Screenshot