Multi tier Drop Down Menus Using Lists and CSS

If you caught it, the example of creating drop down menus on our list tag page, used button images.

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

If you care to compare, this horizontal drop down menu uses the exact same HTML code as the vertical drop down on the list tag page.

The difference in appearance and function 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*/
nav, ul, li, a {
  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;
                /* Clear floats */
	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 !important;
	background:#598059;
	text-decoration:none;
    border-radius: 5px;
    box-shadow: 5px 5px 10px #000000;

}
ul.hnavbar5 a:hover{
	color:#80ff80 !important;
	background:#598059;
	text-decoration:none;
box-shadow: 3px 3px 6px #000000 inset;
}

/*--- 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;
 
             }


ul.hnavbar5 li ul li:hover ul {
            display: block;
            top: 0;
	        left:100%; 
            z-index: 10
              }
ul.hnavbar5 li:hover a{ 
	background:#3E5A3E !important;
	text-decoration:none;
}
ul.hnavbar5 li:hover ul a{ 
	text-decoration:none;
}
ul.hnavbar5 li:hover ul li a:hover{ 
	background:#598059 !important;
box-shadow: 3px 3px 6px #000000 inset;
}

 

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 type="text/css">
CSS here
</style>

3...Test the Booger!!