How to create a simple CSS dropdown menu

Cascading Style Sheets (CSS) allow you to customize the design of your site with precision and provide quick and convenient methods to tweak the look of your web pages on an ongoing basis. In some cases, they also enable powerful interactive features without the need for Javascript code.

In this guide, we’ll show you how to create a simple, cascading dropdown menu using a combination of HTML and CSS rules. No Javascript required!

Create the CSS rules

Create a webpage using a text editor or specialist website-editor such as Adobe Dreamweaver. In this example, we’ll embed the CSS code in the <head> section of the web page, but you could choose to create and link an external CSS stylesheet if you wish.

Enter the following code:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style>

 

CSS rule creation

Create the HTML code for the menu

Now enter the following code in the <body> section of the page:

<ul id="drop-nav">
 <li><a href="#">Animals</a>
 <ul>
 <li><a href="#">Cats</a></li>
 <li><a href="#">Rabbits</a></li>
 <li><a href="#">Dogs</a></li>
 </ul>
 </li>

<li><a href="#">Rooms</a>
 <ul>
 <li><a href="#">Kitchen</a></li>
 <li><a href="#">Bedroom</a></li>
 <li><a href="#">Attic</a></li>
 <li><a href="#">Den</a></li>

</ul>
 </li>

<li><a href="#">Objects</a>
 <ul>
 <li><a href="#">Monitor</a></li>
 <li><a href="#">Microphone</a></li>
 </ul>
 </li>

</ul>

HTML creation

Upload and test

Save the file and upload it to your server, using an FTP client or cPanel File Manager. View the file in a web browser and tweak your CSS styling and HTML menu content as required.

Menu test

For further questions, or if you need help, please open a support ticket from your HostPapa Dashboard. Follow this link to learn how.

Related Articles