This option will reset the home page of this site. Restoring any closed widgets or categories.

Reset

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 {
 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.5.7_846]
Rating: 0.0/10 (0 votes cast)
VN:F [1.5.7_846]
Rating: 0 (from 0 votes)

Related posts:

  1. Get IP address using gethostbyname() function
  2. Context Right Click Menu Using Javascript
  3. Displaying or changing images each day
  4. Learn CSS Basics Very Simple Tutorial
  5. Simple XML Reading Using PHP
  6. Get textbox value from dropdown using ajax and php
  7. Appending string using php to a text file

Leave a Reply

Comments (required)

Spam Protected