Ever wondered how to make those drop-down menus using CSS? There are many ways to do it but they are all pretty similar. Here’s how I do it.
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
CSS Dropdown Stylesheet
by Mike Lopez
http://coderscult.com
*/
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
CSS Dropdown Javascript for Internet Explorer
by Mike Lopez based on Son-Of-Sucker-Fish IE Hack
http://coderscult.com
*/
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: dropdown.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="#">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="#">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="#">Link 3</a></li>
</ul>
</body>
</html>
There you go. Copy and paste the code into their proper filenames and check it out. Here’s a working sample:
March 14th, 2008 at 3:06 pm
cool……i need this one..
for supremacy