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)
- drop down menu sample javascript php (3)
- easy drop down menu css (3)
- onchange in symfony2 (3)
- drop down menu css (3)
- simple css dropdown (3)
- symfony2 drop down list (3)
- yii dropdown from sql (3)
- yii dropdownlist onchange ajax (2)
- dropdown with checkboxes in yii (2)
- how to get id accordingly by selecting value from database in dropdownlist using jsp (2)
- how to store multiple checkbox values in yii framework (2)
- simple dropdown menu (2)
- language selection drop down css (2)
- symfony2 drop down from database (2)
- showhint dropdown ajax with php (2)
- stylish horizontal css menu free with java script (2)
- simple css drop down menus (2)
- simple dropdown menu css (2)
- drop down dob script (2)
- css language dropdown (2)
- code for a simple css dropdown menu (2)
- css dropdown menu (2)
- basic css popup list (1)
- combobox onchange spring mvc (1)
- simple css dropdown language (1)
- code for dropdown menu (1)
- simple css dropdown script (1)
- simple css hover menu (1)
- simple pure css dropdown menu (1)
- simple php drop down menu (1)
- simple drop down menu in css (1)
- simple drop down menus with css (1)
- chromeless drop down menu script (1)
- simple css drop down position (1)
- conditional drop down menu for another dropdown using php find_ccode php (1)
- copy dropdown database to textfield (1)
- php dollar onkeyup=showhint(this value) (1)
You will also be interested in ,
- Text Size Switching Using PHP
- Transparent Box using CSS
- Image shadow using css and html
- Drop down menu going behind flash element
- Simple auto suggest script using ajax php css and tags from wordpress
- Learn CSS Basics Very Simple Tutorial
- Cursor:hand css not working with mozilla/firefox
- Another cool horizontal menu script using css
- Standard horizontal menu using css
- CSS or Table?
