Create Menu with Vertical Sub Menu using CSS

JonJacobs
 
on Aug 04, 2022 12:25 AM
511 Views

Thank you very much!

Add Unordered List as Sub Menu item using CSS

It worked. The submenus displayed horizontally. Is there a way to make the submenu list items display vertically?

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

Hi JonJacobs,

Please refer below demo sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <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; }
        .vertical-menu a { background-color: darkcyan; color: black; padding: 10px; display: block; text-decoration: none }
        .vertical-menu a:hover { background-color: ThreeDFace; }
    </style>
</head>
<body>
    <form>
        <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="vertical-menu">
                            <a href="#">Link 1</a>  
                            <a href="#">Link 2</a>  
                            <a href="#">Link 3</a>  
                        </ul>
                    </div>
                </li>
            </ul>          
        </center>
    </form>
</body>
</html>

Demo