Website Scripts And Cloud Tutorials

How to create simple dropdown menu using CSS

Byadmin

May 23, 2009 ,

Last updated on March 11th, 2022 at 08:45 am

Click to rate this tutorial!
[Total: 4 Average: 4.8]

In this tutorial we are going to focus on creating a dropdown menu for your website without much complexity. Just using basic HTML attributes along with some CSS to style the menu. All we have to implement is the dropdown logic using CSS display:block . Check it out.

The CSS Code

This is the main part of the script (CSS) which gives the menu dropdown structure. Without this CSS, all you will see is plain HTML only output with some hyper links. Styling is given only for <ul> and <li> tags. Class name is dropdown.

Filename: dropdown.css

ul.dropdown{
margin:0;
padding:0;
list-style:none;
float:left;
width:100%;
}
.dropdown li{
margin:0;
padding:0;
float:left;
position:relative;
}
.dropdown ul{
display:none;
float:none;
margin:0;
padding:0;
list-style:none;
}
.dropdownli li{
float:none;
display:inline;
white-space:nowrap;
}

.dropdown li:hover ul{
position:absolute;
display:block;
}

.dropdown a{
display:block;
padding:12px 16px;
margin:1px 1px 4px;
font-family: Arial, Helvetica,sans-serif;
font-size:19px;
background:#007b88;
color:#fff;
text-decoration:none;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown a:hover{
background:#aa6800;
}

The HTML

Finally, here is the mail HTML code inside file named menu.html, that combine all these scripts together.

Filename: MainPage.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Dropdown</title>
<link rel="stylesheet" type="text/css" href="dropdown.css"/>
</head>
<body>
<ul class="dropdown" id="dropdown">
 <li><a href="#">MainLink 1</a>
 <ul>
  <li><a href="#">Sublink 1-1</a></li>
  <li><a href="#">Sublink 1-2</a></li>
  <li><a href="#">Sublink 1-3</a></li>
 </ul>
 </li>
 <li><a href="#">MainLink 2</a>
 <ul>
  <li><a href="#">Sublink 2-1</a></li>
  <li><a href="#">Sublink 2-2 lipsum</a></li>
  <li><a href="#">Sublink 2-3</a></li>
  <li><a href="#">Sublink 2-4</a></li>
 </ul>
 </li>
 <li><a href="#">MainLink 3</a></li>
<li><a href="#">MainLink 4</a>
 <ul>
  <li><a href="#">Sublink 2-1</a></li>
  <li><a href="#">Sublink 2-2</a></li>
 </ul>
 </li>
</ul>
</body>
</html>

As you can see we are calling the CSS file in this

<link rel="stylesheet" type="text/css" href="dropdown.css"/>

Demo

The Internet Explorer Javascript Hack (If required)

Hey! Didn’t I say CSS? Why do I need Javascript? Well, if the guys in Microsoft just followed CSS standards properly then we won’t need to put this javascript. Yes, this is here because we don’t want to make those IE(Internet Explorer) users feel left out.

Filename: dropdown.js

varliHover =function(){
varliEls = document.getElementById("dropdown").getElementsByTagName("LI");
for(vari =0; i < liEls.length; i++){
 liEls[i].onmouseover=function(){
 this.className+=" lihover";
}
 liEls[i].onmouseout=function(){
 this.className=this.className.replace(newRegExp(" lihover\\b"),"");
}
}
}
if(window.attachEvent)window.attachEvent("onload", liHover);

If you are creating this javascript file then add the below code to the menu.html file to call it or just put the javascript directly within <script></script> tag inside the html file.

<script language="javascript" src="dropdown.js"></script>
Click to rate this tutorial!
[Total: 4 Average: 4.8]

Leave a Reply

Your email address will not be published.