facebook twitter youtube
in Css - 23 May, 2009, This Tutorial Has Been Viewed 8,772 Times.
by admin - no comments
Simple CSS Dropdown Menu
VN:F [1.9.22_1171]
Rating: 9.5/10 (4 votes cast)

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 {
 margin0;
 padding0;
 list-stylenone;
 floatleft;
 width100%;
}
.dropdown li {
 margin0;
 padding0;
 floatleft;
 positionrelative;
}
.dropdown ul {
 displaynone;
 floatnone;
 margin0;
 padding0;
 list-stylenone;
}
.dropdown li li {
 floatnone;
 displayinline;
 white-spacenowrap;
}

.dropdown li:hover ul, .dropdown li.lihover ul {
 positionabsolute;
 displayblock;
}

.dropdown a {
 displayblock;
 padding3px 10px;
 margin0 1px 1px 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size9pt;
 background#080;
 color#fff;
 text-decorationnone;
}

.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

<html xmlns=“http://www.w3.org/1999/xhtml”>
 <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.

VN:F [1.9.22_1171]
Rating: 9.5/10 (4 votes cast)
Simple CSS Dropdown Menu, 9.5 out of 10 based on 4 ratings

Incoming search terms:




coded by nessus

Leave a Reply

Close
Please support the site
By clicking any of these buttons you help our site to get better