Multi tier Drop Down Menus Using Lists and CSS
In this demonstration we'll build a multi tier drop down (single tier, two tier, three tier) that requires no images for the buttons.
Multi Tier Horizontal
The appearance is defined in the CSS.
When you don't use button images, the width of the buttons is determined by the length of the text in the longest associated anchor tag.
The HTML code
The HTML code shown here demonstrates the creation of a 3 button drop down menu.
Examples for a single tier, two tier and three tier button are provided.
<nav class="navigate5">
<ul class="hnavbar5"><!--Parent Unordered List-->
<li><a href="#">Category</a></li> <!--Single Tier-->
<li><a href="#">Category</a> <!--Two Tier in Green-->
<ul>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Sub Category</a></li>
</ul>
</li> <!--End Two Tier List-->
<li><a href="#">Category</a> <!--Three Tier in Burgundy-->
<ul>
<li><a href="#">Sub Category</a>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
</ul>
</li>
</ul>
</li> <!--End Three Tier List-->
</ul> <!--End Parent List-->
</nav>
The Css
/*First remove all default margins and padding*/
* {
padding: 0 0;
margin: 0 0
}
nav.navigate5 {
width: 100%;
padding: .5% 0;
background: #000000;
float: left
}
/* hnavbar */
ul.hnavbar5 {
list-style:none;
font-size: 16px;
font-weight:bold;
margin-bottom: 0;
float:left;
width:100%;
position:relative;
z-index:5;
}
ul.hnavbar5 li {
float:left;
margin-right:10px;
position:relative;
}
ul.hnavbar5 a {
display:block;
padding:5px;
color:#ffffff ;
text-decoration:none;
}
ul.hnavbar5 a:hover {
color:#ff0000;
text-decoration:none;
}
/*--- DROPDOWN ---*/
ul.hnavbar5 ul,
ul.hnavbar5 li:hover ul li ul {
list-style:none;
position:absolute;
display: none;
}
ul.hnavbar5 ul li {
padding-top: 0px;
float:none;
}
ul.hnavbar5 ul a {
white-space:nowrap;
}
ul.hnavbar5 li:hover ul {
display: block;
left: 0;
z-index: 10;
background: #ffffff;
border: 1px solid #000
}
ul.hnavbar5 li ul li:hover ul {
display: block;
top: 0;
left:100%;
z-index: 10;
background:#ffffff;
border: 1px solid #000
}
ul.hnavbar5 li:hover ul li a {
color:#000;
background:#fff ;
text-decoration:none;
}
ul.hnavbar5 li:hover ul a {
text-decoration:none;
}
ul.hnavbar5 li:hover ul li a:hover {
background:#fff;
}
Create Your Horizontal 3 Tier Drop Down Menu
1...Copy the HTML code into a new HTML page.
Note: Preview the page before you add the CSS.
2...Copy and place the CSS in the head section using the embedded style tag:
<style>
CSS here
</style>
3...Test the Booger!!
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried out RWD template kit? Download Template #402 - 6 Page Kit