How to Create a Fly-Out Menu with CSS

See CSS: Tips and Tricks for similar articles.

In this how to, you'll learn how to create a fly-out menu with CSS.

Start with the following HTML document containing an unordered list:


<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>CSS Menu</title>
</head>
<body><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></body>
</html>

Create a file for an external styesheet and link to it from the HTML using the following tag:
```
<link href="menu.css" rel="stylesheet">
	
```

Inside the stylesheet, use the following CSS to create a basic vertical menu:


#mainMenu {
	margin:10px;
	width:120px;
	font-family: "Trebuchet MS";
}

#mainMenu li {
	display:block;
	border:1px solid #000;
	border-top:0px;
}

#mainMenu li:first-child {
	border-top:1px solid #000;
}

#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	color:#009;
}

#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}

Open the HTML page in a browser. This code renders the following: 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:
Remove the default margins and padding from the list and list items: ul, li { margin: 0; padding: 0; }
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*/
}
```
Position the submenus absolutely and hide the submenus.
```
#mainMenu li ul li {
	font-size:smaller;
}
```
Display the submenu when the user hovers over the main option. #mainMenu li:hover ul { display:block; }

The finished CSS should look like the following:


ul, li {
	margin: 0;
	padding: 0;
}
#mainMenu {
	margin:10px;
	width:120px;
	font-family: "Trebuchet MS";
}
#mainMenu li {
	position:relative;
	display:block;
	border:1px solid #000;
	border-top:0px;
}
#mainMenu li:first-child {
	border-top:1px solid #000;
}
#mainMenu a {
	display:block;
	padding:3px;
	text-decoration:none;
	color:#009;
}
#mainMenu a:hover {
	background-color:#009;
	color:#fff;
}
#mainMenu li ul {
	position:absolute;
	width:150px;
	left:118px;
	top:5px;
	display:none;
}
#mainMenu li ul li {
	font-size:smaller;
}
#mainMenu li:hover ul {
	display:block;
}

Open the HTML page in a browser. This code renders the following:

How to Create a Fly-Out Menu with CSS

Related Articles