--- title: "Creating responsive drop-down in HTML" description: "This Article demonstrates how to create simple and responsive drop-downs using basic HTML and CSS." author: "Ashutosh Patel" published: 2024-06-10 updated: 2024-06-10 canonical: https://www.mindstick.com/articles/336055/creating-responsive-drop-down-in-html category: "html" tags: ["html", "html5", "dropdown", "html drop-down"] reading_time: 2 minutes --- # Creating responsive drop-down in HTML ### Responsive Drop-Down in HTML When you create a [responsive](https://www.mindstick.com/forum/12845/how-to-responsive-div-table-struggle-multiple-rows) [dropdown menu](https://www.mindstick.com/blog/708/css3-animated-dropdown-menu) in HTML, it often uses a combination of HTML, CSS, and sometimes [JavaScript](https://www.mindstick.com/forum/12869/how-to-c-sharp-and-javascript-email-validation-regex) ## HTML Basics nav-bar syntax with drop-down ```html
Home About
Web Design Graphic Design SEO
Contact
``` ## Example- ```html Here is the complete example of how to apply the CSS properties for creating the responsive drop-down using HTML Responsive Dropdown Menu
Home About
Web Design Graphic Design SEO Digital Marketing
Contact
``` **In the above Example-** \ The navbar class is created using the `
` element of a class **navbar**.\ Each [menu item](https://www.mindstick.com/forum/339/highlighting-the-menu-item) is a **hyperlink ( tag)** in the navbar. The dropdown menu is created using the class dropdown [content](https://www.mindstick.com/articles/12369/cms-extension-for-magento-2-advanced-content-manager-2) using a combination of button (`