Simple CSS Dropdown Menu
Here is a simple CSS dropdown menu which you can simply copy and paste for your website.
AS I ALWAYS SAY TAKE CARE OF THE QUOTES WHILE COPYING, USE DREAMWEAVER TO EDIT THE CODE
The CSS Code
This is the part that gives the dropdown structure. Without the CSS, all you’ll get is plain HTML only output.
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;
}
.dropdown li li {
float: none;
display: inline;
white-space: nowrap;
}
.dropdown li:hover ul, .dropdown li.lihover ul {
position: absolute;
display: block;
}
.dropdown a {
display: block;
padding: 3px 10px;
margin: 0 1px 1px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
background: #080;
color: #fff;
text-decoration: none;
}
.dropdown a:hover {
background: #0a0;
}
The Internet Explorer Javascript Hack
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 users feel left out.
Filename: dropdown.js
var liHover = function () {
var liEls = document.getElementById (“dropdown”).getElementsByTagName (“LI”);
for (var i = 0; i < liEls.length; i++) {
liEls[i].onmouseover = function () {
this.className += ” lihover”;
}
liEls[i].onmouseout = function () {
this.className = this.className.replace (new RegExp (” lihover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent (“onload”, liHover);
The HTML
Finally, here’s the stuff that puts these things together, the html page.
Filename: MainPage.html
<head>
<title>CSS Dropdown</title>
<link rel=“stylesheet” type=“text/css” href=“dropdown.css” />
<script language=“javascript” src=“dropdown.js”></script>
</head>
<body>
<ul class=“dropdown” id=“dropdown”>
<li><a href=“#”>Main Link 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>
<li><a href=“#”>Sublink 1-4</a></li>
</ul>
</li>
<li><a href=“#”>Main Link 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=“#”>Main Link 3</a></li>
</ul>
</body>
</html>
There you go. Copy and paste the code into their proper filenames and check it out.
Related posts:
- Get IP address using gethostbyname() function
- Context Right Click Menu Using Javascript
- Displaying or changing images each day
- Learn CSS Basics Very Simple Tutorial
- Simple XML Reading Using PHP
- Get textbox value from dropdown using ajax and php
- Appending string using php to a text file
