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.
Incoming search terms:
- simple css dropdown menu (88)
- simple drop down menu css (9)
- simple css drop down menu (5)
- easy drop down menu css (3)
- drop down menu sample javascript php (3)
- simple css dropdown (3)
- drop down menu css (3)
- drop down dob script (2)
- simple css drop down menus (2)
- plain simplle css dropdown (2)
- showhint dropdown ajax with php (2)
- simple dropdown menu (2)
- css menu (2)
- symfony2 drop down list (2)
- css dropdown menu (2)
- code for a simple css dropdown menu (2)
- stylish horizontal css menu free with java script (2)
- language dropdown css (1)
- language selection drop down css (1)
- listbox razor jquery (1)
- selected valueye göre disable (1)
- selected radio button disable onclick (1)
- pagination in php with drop down (1)
- plain text dropdown menu css (1)
- pdf css drop dwon list 1 of 2 (1)
- pdf dropdown menu using css tutorial (1)
- plain css dropdown menu (1)
- php add to list drop down list (1)
- php dollar onkeyup=showhint(this value) (1)
- simple css combobox (1)
- simple drop down menus with css (1)
- tablefilter jquery php (1)
- symfony2 select drop down (1)
- symfony dropdown onchange (1)
- special pagination in php with drop down menu (1)
- simply dropdown menu css (1)
- simple script css drop down menu (1)
- simple pure css dropdown menu (1)
- simple dropdown menu css code pdf (1)
- simple dropdown menu css (1)
You will also be interested in ,
- Transparent Box using CSS
- Image preloader using CSS
- Context Right Click Menu Using Javascript
- Learn CSS Basics Very Simple Tutorial
- CSS or Table?
- Another cool horizontal menu script using css
- Changing link style properties using css
- Change Mouse cursor of your webpage using css
- Drop down menu going behind flash element
- Export MySQL to CSV (Excel) using php