How to create Vertical Menu using HTML and CSS ? Last Updated : 09 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report In This article, we will learn how to create vertical menus by using HTML and CSS. Vertical Menu: We can create a vertical menu in the form of buttons and a scrollable menu. Vertical Menu is the buttons arranged in the vertical menu bar/navbar. How to create a vertical menu using buttons: We can create it simply by using HTML and CSS. We will create a simple structure of the web page by using <div>,<li>, and <a> tags. Syntax: <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">1</a> ... <a href="#">n</a> </div> Example: Here is the implementation of the above-explained method. HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width,initial-scale=1"> <style> .vertical-menu { width: 200px; } .vertical-menu a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-color: #04AA6D; color: white; } </style> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Vertical Menu</h3> <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">About Us </a> <a href="#">Contact Us</a> <a href="#">Login </a> <a href="#">Sign Up</a> </div> </body> </html> Output: How to create a vertical menu using scrollable: Here, we will see how to create a vertical menu using scrollable. To make this, we will use simple HTML and CSS. Syntax: <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">1</a> ... <a href="#">n</a> </div> Example: In this example implementation of the above demonstrated method. HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content= "width=device-width,initial-scale=1"> <style> .vertical-menu { width: 200px; height: 150px; overflow-y: auto; } .vertical-menu a { background-color: #eee; color: black; display: block; padding: 12px; text-decoration: none; } .vertical-menu a:hover { background-color: #ccc; } .vertical-menu a.active { background-color: #04AA6D; color: white; } </style> </head> <body> <h1 style="color:green; text-align: center;"> GeeksforGeeks </h1> <h3>Vertical Menu</h3> <div class="vertical-menu"> <a href="#" class="active">Home</a> <a href="#">About Us </a> <a href="#">Contact Us</a> <a href="#">Login </a> <a href="#">Sign Up</a> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article How to create a Menu Icon using CSS ? A attardeurjita77 Follow Improve Article Tags : Web Technologies Web Templates Similar Reads How to create Vertical Navigation Bar using HTML and CSS ? After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea 3 min read How to create a mega menu using HTML and CSS ? HTML is a markup language used to create web pages and CSS is a stylesheet language used to design a document written in a markup language such as HTML. In this article, we are going to know how can we create a mega menu on our web page with the help of only HTML and CSS. Mega menus are a type of ex 4 min read How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu 5 min read How to create a Menu Icon using CSS ? The Menu Icon is mostly used on smaller screens, there's limited space to display a full navigation menu. A menu icon helps in hiding the navigation items initially and revealing them when the user needs them. In this article, we will see how To Create a Menu Icon using CSS. There are many ways to c 3 min read How to create Right Aligned Menu Links using HTML and CSS ? The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display 3 min read Create a Curtain Menu using HTML and CSS This article will show you how to create a Curtain menu navbar effect with the help of HTML and CSS. The curtain menu means revealing or pulling down the menu items like a curtain. HTML is used to create the structure of the curtain menu and applies styles on that element to make like curtain menu e 3 min read Like