photo credit: Foxtongue

For some time now I have been using a few CSS Flyout Menu’s on different projects by just copying and pasting code from different websites that I have come across. Some of you may do just that with this article. But in a project I am currently working on I thought I would sit down and actually understand what is going on behind the scenes in the CSS to make this happen. During the early days of my development this is what I used to do to get by copying and pasting examples from other sites trying to get things done as quick as possible, well not any more. Feel free to copy and paste away with this but I urge you to take the time to read what I am about to write and take it all in so you to can understand what is involved.

I have wanted to write a pure CSS flyout menu for a while now so I though now is a good a time as any to get it done. In this example I will so you how to create it. You can have a look at the end result here. I have made the different elements different colors to separate them and make it easier to look at it in the CSS markup

Step 1. The (X)HTML Markup

For this example I used simple nested unordered lists, you can take a look at the code here. As you can see there is a top level UL with a List Element (LI), then nested inside that LI element there is another Unordered List (UL) with List Elements inside that as well. Make sense?. Take a look at the file and work through it. I found it really important to make sure I knew how this was set up. You can take a look at the result of the output here.

Step. 2. The CSS Markup

Now that you have got your head around the nesting of the Unordered Lists, let’s take a look at how we can use Cascading Style Sheets to give us that fly out effect.

.cssfly {
font-family: arial, sans-serif; width:106px; height:150px;
position:relative; margin:0; font-size:11px; margin:50px 0;
}
.cssfly ul li a, .menu ul li a:visited {
display:block; text-decoration:none; color:#000; width:104px;
height:20px; text-align:center; border:1px solid #fff;
border-width:1px 1px 0 0; background: #003399; color:#FFFFFF;
line-height:19px; font-size:11px;
}
.cssfly ul {padding:0; margin:0;list-style-type: none; }
.cssfly ul li {float:left; margin-right:1px; position:relative;}
.cssfly ul li ul {display: none;}

This first block of CSS is just some general styling. Things to note here is the use of position:relative on the list elements, and also the display:none on the nested UL. A good way to work out what each does is to comment out (/* */) those entries and look at the result.

The next block of CSS looks like this.

.cssfly ul li:hover a {color:#fff; background:#000;}
.cssfly ul li:hover ul {
display:block; position:absolute; top:0;
left:105px; width:105px;
}
.cssfly ul li:hover ul li a.hide {
background:#ccc; color:#000;
}
.cssfly ul li:hover ul li:hover a.hide {width:150px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {
display:block; background:#ccc; color:#000; width:150px;
}
.cssfly ul li:hover ul li a:hover {background:red; color:#000;}
.cssfly ul li:hover ul li:hover ul {
display:block; position:absolute; left:151px; top:0; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a {
display:block; width:200px; background:#dfc184; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a:hover {background:#bd8d5e;
color:#fff;
}