Open In App

Pure CSS Vertical Menu with Submenus

Last Updated : 04 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Vertical Menu with Submenus is as similar as nested vertical menu.

Pure CSS Vertical Menu Classes:

  • pure-menu-heading: It is the class that is added for the headings inside or outside the menu list. By default, it capitalizes the text inside.
  • pure-menu-list: It is the class for the unordered list that contains the menu items. The list items inside this list must have the class “pure-menu-item”.
  • pure-menu-link: It is the class that is added to the links inside the menu items.
  • pure-menu-allow-hover: It is the class to display the submenu on hover.
  • pure-menu-has-children: It is the class to mention menu having some submenus.
  • pure-menu-children: It is the class to mention submenus.

Syntax:

<li class="pure-menu-item 
           pure-menu-has-children
           pure-menu-allow-hover">  
    <a href="#" class="pure-menu-link">...</a>
    <ul class="pure-menu-children">
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">...</a>
        </li>
        <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">..</a>
        </li>  
    </ul>
</li>

Example 1: In this example, we will create Vertical Menu with a single Submenu.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Pure CSS Vertical Menu</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet"
          href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css">
    <style>
        .pure-menu-heading {
            color: #308d46;
        }
 
        .custom-display {
            /* To limit the menu width to
            the content of the menu: */
            display: inline-block;
        }
    </style>
</head>
 
<body>
    <div class=" pure-menu custom-display">
        <ul class="pure-menu-list">
            <li class="pure-menu-heading">
                GeeksforGeeks
            </li>
 
 
            <li class="pure-menu-item
                       pure-menu-has-children
                       pure-menu-allow-hover">
                <a href="#"
                   class="pure-menu-link">
                    Tutorials
                </a>
 
                <ul class="pure-menu-children">
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            Data Structures and Algorithms
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            GATE 2022
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#"
                           class="pure-menu-link">
                            Practice
                        </a>
                    </li>
                </ul>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Students
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Jobs
                </a>
            </li>
            <li class="pure-menu-item">
                <a href="#"
                   class="pure-menu-link">
                    Courses
                </a>
            </li>
 
        </ul>
    </div>
</body>
 
</html>
 






                        










Output:


Pure CSS Vertical Menu with Submenus


Example 2: In this example, we will create demonstrate Vertical Menu with nested Submenu.






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


  <title>Pure CSS Vertical Menu</title>


  <meta name="viewport"


        content="width=device-width, initial-scale=1.0" />


  <link rel="stylesheet"


        href=


"https://unpkg.com/purecss@2.0.6/build/pure-min.css">


  <style>


    .pure-menu-heading {


      color: #308d46;


    }


 


    .custom-display {


      /* To limit the menu width to 


            the content of the menu: */


      display: inline-block;


    }


  </style>


</head>


 


<body>


  <div class=" pure-menu custom-display">


    <ul class="pure-menu-list">


      <li class="pure-menu-heading">


        GeeksforGeeks


      </li>


 


      <li class="pure-menu-item 


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Tutorials


        </a>


 


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Data Structures and Algorithms


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              GATE 2022


            </a>


          </li>


 


          <li class="pure-menu-item 


                     pure-menu-has-children 


                     pure-menu-allow-hover">


            <a href="#"


               class="pure-menu-link">


              Practice


            </a>


            <ul class="pure-menu-children">


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  HTML


                </a>


              </li>


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  CSS


                </a>


              </li>


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  JavaScript


                </a>


              </li>


            </ul>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item">


        <a href="#"


           class="pure-menu-link">


          Students


        </a>


      </li>


      <li class="pure-menu-item">


        <a href="#"


           class="pure-menu-link">


          Jobs


        </a>


      </li>


      <li class="pure-menu-item">


        <a href="#"


           class="pure-menu-link">


          Courses


        </a>


      </li>


 


    </ul>


  </div>


</body>


 


</html>



















                        







                        










 Output:   


Pure CSS Vertical Menu with Submenus


  


Example 3: In this example, we will create demonstrate Vertical Menu with multiple Submenus. 






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


  <title>Pure CSS Vertical Menu</title>


  <meta name="viewport"


        content="width=device-width, initial-scale=1.0" />


  <link rel="stylesheet"


        href=


"https://unpkg.com/purecss@2.0.6/build/pure-min.css">


  <style>


    .pure-menu-heading {


      color: #308d46;


    }


 


    .custom-display {


      /* To limit the menu width to 


            the content of the menu: */


      display: inline-block;


    }


  </style>


</head>


 


<body>


  <div class=" pure-menu custom-display">


    <ul class="pure-menu-list">


      <li class="pure-menu-heading">


        GeeksforGeeks


      </li>


 


      <li class="pure-menu-item 


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Tutorials


        </a>


 


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Data Structures and Algorithms


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              GATE 2022


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Practice


            </a>


          </li>


        </ul>


 


      </li>


 


      <li class="pure-menu-item 


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Students


        </a>


 


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Competitive Programming


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Geeks of the Month


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Placement Courses


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Internship


            </a>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item 


                 pure-menu-has-children


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Jobs


        </a>


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Apply for Jobs


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Post a Jobs


            </a>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item">


        <a href="#"


           class="pure-menu-link">


          Courses


        </a>


      </li>


 


    </ul>


  </div>


</body>


 


</html>



















                        







                        










 Output:    


Pure CSS Vertical Menu with Submenus


Example 4: In this example, we will create demonstrate Vertical Menu with Multiple Submenus and nested Submenu.






HTML















                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html lang="en">


 


<head>


  <title>Pure CSS Vertical Menu</title>


  <meta name="viewport"


        content="width=device-width, initial-scale=1.0" />


  <link rel="stylesheet"


        href=


"https://unpkg.com/purecss@2.0.6/build/pure-min.css">


  <style>


    .pure-menu-heading {


      color: #308d46;


    }


 


    .custom-display {


      /* To limit the menu width to 


            the content of the menu: */


      display: inline-block;


    }


  </style>


</head>


 


<body>


  <div class=" pure-menu custom-display">


    <ul class="pure-menu-list">


      <li class="pure-menu-heading">


        GeeksforGeeks


      </li>


      <li class="pure-menu-item 


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Tutorials


        </a>


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Data Structures and Algorithms


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              GATE 2022


            </a>


          </li>


 


          <li class="pure-menu-item 


                     pure-menu-has-children 


                     pure-menu-allow-hover">


            <a href="#" class="pure-menu-link">


              Practice


            </a>


            <ul class="pure-menu-children">


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  HTML


                </a>


              </li>


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  CSS


                </a>


              </li>


              <li class="pure-menu-item">


                <a href="#"


                   class="pure-menu-link">


                  JavaScript


                </a>


              </li>


            </ul>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Students


        </a>


 


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Competitive Programming


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Geeks of the Month


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Placement Courses


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Internship


            </a>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item 


                 pure-menu-has-children 


                 pure-menu-allow-hover">


        <a href="#"


           class="pure-menu-link">


          Jobs


        </a>


        <ul class="pure-menu-children">


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Apply for Jobs


            </a>


          </li>


          <li class="pure-menu-item">


            <a href="#"


               class="pure-menu-link">


              Post a Jobs


            </a>


          </li>


        </ul>


      </li>


 


      <li class="pure-menu-item">


        <a href="#"


           class="pure-menu-link">


          Courses


        </a>


      </li>


 


    </ul>


  </div>


</body>


 


</html>



















                        







                        










Output:      


Pure CSS Vertical Menu with Submenus
Pure CSS Vertical Menu with Submenus


Reference: https://purecss.io/menus/


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Pure CSS Form Input Sizing
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Which tag is used to display additional information when we click to open or close on demand in HTML ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                React.js Blueprint Menu Components Submenus
            

        
    
        
            

                Angular PrimeNG Menu SubMenus
            

        
    
        
            

                Design a Vertical and Horizontal menu using Pure CSS
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Vertical Menu Layout
            

        
    
        
            

                Pure CSS Scrollable Vertical Menu
            

        
    
        
            

                Foundation CSS Menu Vertical Menu
            

        
    
        
            

                Pure CSS Horizontal Menu
            

        
    
        
            

                How to design a dropdown menu using pure CSS ?
            

        
    
        
            

                Pure CSS Responsive Horizontal-to-Scrollable Menu Layout
            

        
    
        
            

                Pure CSS Scrollable Horizontal Menu
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        sahilsulakhe3                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox