Add Unordered List as Sub Menu item using CSS

JonJacobs
 
on Aug 02, 2022 10:43 PM
448 Views

I have a horizontal menu as an unordered list:

<form id="MainForm" runat="server">
    <h1>Main Form</h1>
    <div>
        <ul class="nav">
            <li><a href="/WebForm1.aspx">Form 1</a></li>
            <li><a href="/WebForm2.aspx">Form 2</a></li>
            <li><a href="/WebForm3.aspx">Form 3</a></li>
        </ul>
    </div>
</form>

From my external .css:

ul.nav {
    padding-left: 0px;
    background-color: #3D99CE;
    text-align: left;
}

ul.nav > li {
    display: inline-block;
    padding: 10px 10px;
    height: 10px;
}

ul.nav > li:hover {
    background-color: #2779BF;
}

ul.nav > li > a {
    color: white;
    text-decoration: none;
}

I would like another list item in the horizontal list that has a dropdown list that would serve as submenu items that do not show until I click the horizontal menu item. How can I achieve that?

I suspect the magic will be in the style sheet.

Thank you.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
KasimA
 
on Aug 03, 2022 01:40 AM
on Aug 03, 2022 01:44 AM

Hi JonJacobs,

Please refer below demo sample.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul.nav { padding-left: 0px; background-color: #3D99CE; text-align: left; }
        ul.nav > li { display: inline-block; padding: 10px 10px; height: 10px; }
        ul.nav > li:hover { background-color: #2779BF; }
        ul.nav > li > a { color: white; text-decoration: none; }
        .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1; }
        .dropdown:hover .dropdown-content { display: block; }
    </style>
</head>
<body>
    <center>
        <h1>Main Form</h1>
        <ul class="nav">
            <li><a href="#">Form 1</a></li>
            <li><a href="#">Form 2</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown">Form 3</a>
                <div class="dropdown-content">
                    <ul class="nav">
                        <li><a href="https://www.aspsnippets.com/Articles/Implement-Paging-in-ASPNet-GridView-in-Code-Behind-using-C-and-VBNet.aspx" target="_blank">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </center>
</body>
</html>

Demo