CSS Dynamic Menus

Contact Us or call 1-877-932-8228
CSS Dynamic Menus

CSS Dynamic Menus

Dynamic menus have long been popular on the web. Until relatively recently, it was necessary to use JavaScript to create these menus. The wider support of the :hover pseudo-class changes that. In this section, we'll show you how to create dynamic menus using pure CSS.

CSS Dropdown Menu

So far, we have only looked at how we can use CSS to change the display of single-level menus. But what happens when we introduce a second level of choices using a nested list. The code sample below shows the same horizontal menu we saw before, but with the addition of a nested list:

Code Sample:

CssListMenus/Demos/CssMenu-horizontal-nested.html
---- C O D E   O M I T T E D ----
<ul id="mainMenu">
	<li><a href="home.html">Home</a></li>
	<li><a href="services.html">Services</a></li>
	<li><a href="products.html">Products</a></li>
	<li><a href="support.html">Support</a></li>
	<li><a href="blog.html">Blog</a></li>
	<li><a href="about.html">About</a><ul>
			<li><a href="history.html">Company History</a></li>
			<li><a href="staff.html">Our Staff</a></li>
			<li><a href="press.html">Press Releases</a></li>
			<li><a href="investorInfo.html">Investor Information</a></li>
		</ul></li>
	<li><a href="contact.html">Contact</a></li>
</ul>
---- C O D E   O M I T T E D ----

Code Explanation

With this nested list in place and without changing the CSS, this page will display as follows: Nested List and Without Changing CSS

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

  1. Set the position of the main menu items to relative. We will need to position the submenus using absolute positioning, but absolutely positioned elements are positioned within their nearest non-statically positioned containing element. So, to prepare for that, we'll first make the main list items relatively positioned:
    #mainMenu li {
    	position:relative;
    	/*other declarations omitted*/
    }
  2. Position the submenus absolutely. Submenus are contained in ul elements within li elements. The following rule uses absolute positioning to position them immediately below those li elements:
    #mainMenu li ul {
    	position:absolute;
    	margin:0px;
    	padding:0px;
    	left:-3px;
    	top:22px;
    }
    The result: Resulting Image
  3. Hide the submenus. Add display:none; to the rule above to hide the submenus.
  4. Style the submenu options. The two rules below add borders around the submenu options. We turn the top border off for all but the first option, which we identify with the :first-child pseudo-class so that we don't get a double-thick border resulting from top and bottom borders of adjacent options.
    #mainMenu li ul li {
    	width:150px;
    	font-size:smaller;
    	border-top:none;
    }
    #mainMenu li ul li:first-child {
    	border-top:1px solid #000;
    }
  5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items. The code below sets the display property of the submenu to block when the user hovers over the parent list item:
    #mainMenu li:hover ul {
    	display:block;	
    }

That's it. The full CSS code is shown below:

Code Sample:

CssListMenus/Demos/CssMenu-dropdown.html
---- C O D E   O M I T T E D ----
<link type="text/css" rel="stylesheet" href="../reset-meyer.css">
<style type="text/css">	
	#mainMenu {
		margin:10px;
		width:900px;
		font-family: "Trebuchet MS";
	}	
	#mainMenu li {
		position:relative;display:block;
		width:120px;
		float:left;
		margin-left:2px;
		border:1px solid #000;
	}
	#mainMenu a {
		display:block;
		padding:3px;
		text-decoration:none;
		background-color:#fff;
		color:#009;
	}
	#mainMenu a:hover {
		background-color:#009;
		color:#fff;
	}
	#mainMenu li ul {
		position:absolute;
		margin:0px;
		padding:0px;
		left:-3px;
		top:22px;
		display:none;	
	}
	#mainMenu li ul li {
		width:150px;
		font-size:smaller;
		border-top:none;
	}
	#mainMenu li ul li:first-child {
		border-top:1px solid #000;
	}
	#mainMenu li:hover ul {
		display:block;	
	}</style>
---- C O D E   O M I T T E D ----

Code Explanation

Open CssListMenus/Demos/CssMenu-dropdown.html in your browser to see it in action.

CSS Flyout Menu

Let's now take a look at creating a flyout menu, which is very similar to creating a dropdown menu. The code sample below shows the vertical menu we saw before, but with the addition of several nested lists:

Code Sample:

CssListMenus/Demos/CssMenu-vertical-nested.html
---- C O D E   O M I T T E D ----
<ul id="mainMenu">
	<li><a href="home.html">Home</a></li>
	<li><a href="services.html">Services</a><ul>
			<li><a href="service1.html">Service 1</a></li>
			<li><a href="service2.html">Service 2</a></li>
			<li><a href="service3.html">Service 3</a></li>
		</ul></li>
	<li><a href="products.html">Products</a><ul>
			<li><a href="product1.html">Product 1</a></li>
			<li><a href="product2.html">Product 2</a></li>
			<li><a href="product3.html">Product 3</a></li>
		</ul></li>
	<li><a href="support.html">Support</a></li>
	<li><a href="blog.html">Blog</a></li>
	<li><a href="about.html">About</a><ul>
			<li><a href="history.html">Company History</a></li>
			<li><a href="staff.html">Our Staff</a></li>
			<li><a href="press.html">Press Releases</a></li>
			<li><a href="investorInfo.html">Investor Information</a></li>
		</ul></li>
	<li><a href="contact.html">Contact</a></li>
</ul>
---- C O D E   O M I T T E D ----

Code Explanation

With this nested list in place and without changing the CSS, this page will display as follows: Nested List in Place and Not Changing CSS

By modifying the CSS, we can move the submenus over to the right and hide them until the user hovers over one of the parent menu items. Here are the steps:

  1. Set the position of the main menu items to relative. Like with dropdown menus, we will need to position the submenus using absolute positioning:
    #mainMenu li {
    	position:relative;
    	/*other declarations omitted*/
    }
  2. Position the submenus absolutely and hide the submenus.
    #mainMenu li ul {
    	position:absolute;
    	width:150px;
    	left:118px;
    	top:5px;
    	display:none;
    }
  3. Style the submenu options.
    #mainMenu li ul li {
    	font-size:smaller;
    }
  4. Display the submenu when the user hovers over the main option. The background-color declaration is necessary for Internet Explorer 7. Without it, the submenus can disappear while the user is hovering over them.
    #mainMenu li:hover ul {
    	display:block;
    	background-color:#fff; /*for IE7*/
    }
  5. Position a tags relatively. This is another fix for Internet Explorer 7. If the a tags are left statically positioned, then they won't fill the full width of their parent list items and the menus will only work when users hover over the text of the link.
    #mainMenu a {
    	position:relative;	/*for IE7*/
    	/*other declarations omitted*/
    }
Next