One of my greatest frustrations in my years of web site building has been creating an easy to use (and modify) drop down navigation bar. Everybody wants to use them on their sites, but it seems like there hasn’t been any simple solutions that work in all the browsers.
I’ve purchased menu creating programs that output large chunks of code. I’ve created Javascript and DHTML solutions. And I’ve read every tutorial under the sun that promises to have a ’simple’ solution. I have always made my menus work somehow, but have never really been happy with how they were constructed from a programming perspective. And the code has never been easily transferred from one site to another.
But… I have come across a great solution for drop-down menus that uses ONLY CSS (no Javascript) and is simple to install. To change your links or page structure, you simply modify the bulleted list. 30 seconds worth of modifications can change the entire drop-down structure. I’m using this from now on.
NOTE: I haven’t tested this code in every application. If you’re wanting a drop-down for your facebook profile or craigslist posting, I don’t think you’ll be able to get this to work. You need to have access to the HTML files for your website. Anyway… here goes.
View the sample Dropdown Navigation: Click here
Here’s how to build it in 3 easy steps.
Step 1: Modify this bulleted list to for your desired navigation structure
<ul id=”nav” class=”dropdown dropdown-horizontal”>
<li><a href=”#”>Home</a></li>
<li class=”dir”><a href=”#”>About Us</a>
<ul >
<li><a href=”#”>About My Company</a></li>
<li><a href=”#”>Additional Outsourcing</a></li>
<li ><a href=”#”>Global Partnerships</a></li>
</ul>
</li>
<li class=”dir”><a href=”#”>Products</a>
<ul>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Customers</a></li>
</ul>
</li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Contact Us</a> </li>
</ul>
</div>
Step 2: Copy this code into your master style sheet (modify it for your styling needs)
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
font-family:Arial, Helvetica, sans-serif;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
letter-spacing:0px;
}
ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 0px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown li.rtl ul {
top: 100%;
right: 0;
left: auto;
}
ul.dropdown li.rtl ul ul {
top: 1px;
right: 99%;
left: auto;
}
ul.dropdown {
font-weight: bold;
}
ul.dropdown li {
padding: 3px 15px;
border-left:1px solid #036;
border-bottom:1px solid #FFFFFF;
color:#036;
margin-bottom:0px;
background-color:#FFFFFF;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color:#8D9FE9;
color: #036;
}
ul.dropdown a:link,
ul.dropdown a:visited { color:#036; text-decoration: none; font-weight:normal; font-size:14px; }
ul.dropdown a:hover { color: #036; }
ul.dropdown a:active { color: #000066; }
/* — level mark — */
ul.dropdown ul {
width: 200px;
margin-top: 0px;
}
ul.dropdown ul li {
font-weight: normal;
border-left-color:#FFF;
border-bottom-color:#666666;
letter-spacing:0px;
padding-top:2px;
padding-bottom:2px;
}
/*————————————————-/
* @section Support Class `dir`
* @level sep ul, .class
*/
ul.dropdown *.dir {
padding-right: 20px;
background-image: url(images/nav-arrow-down.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
/* — Components override — */
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
background-image: url(images/nav-arrow-right.png);
background-position: 100% 50%;
background-repeat: no-repeat;
}
ul.dropdown-upward *.dir {
background-image: url(images/nav-arrow-top.png);
}
ul.dropdown-vertical *.dir,
ul.dropdown-upward ul *.dir {
background-image: url(images/nav-arrow-right.png);
}
ul.dropdown-vertical-rtl *.dir {
padding-right: 10px;
padding-left: 15px;
background-image: url(images/nav-arrow-left.png);
background-position: 0 50%;
}
Step 3: Make sure you have this line in the very top of your HTML code. I’m not sure exactly why… but erasing this line will make the code stop working.
There you have it, an easy to use CSS drop-down menu that works in both FireFox and Internet Explorer. I am excited about how this code is going to helpme out in creating fast, and easy drop-down menus in the future.
I hope it helps you too.
