How to Create a Fly-Out Menu with CSS
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: