There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let’s get started on some CSS3 magic!

Today you’ll be learning how to create the candy cane teardrop out of the many different styles and color variations available. You will receive all variations in the source files. Also as an added bonus I’ve added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. The source file even comes with its own documentation!

Note: Support for IE is limited at the moment. We’ll mostly be going through this for the purpose of pushing the envelope with what we can do in CSS3… but as with all things on the edge of practicality, it means sacrificing a bit of stability. We will address the IE topic at the end of the tutorial though!

Step 1: The Layers

The first thing we want to do is create some layers that will overlap each other and stay in place while using as little code as possible. It’s important not to fill your code with a lot of bloat and not to create a lot of
unnecessary floats or absolute positioned elements, so we’ll try to stay relative as much as possible.

The Code:

<!-- the layers !-->
<div id="menu-wrap">
<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="wrap4">
<!-- center image goes here !-->
<div class="completer"></div>
<div class="completer2"></div>
<div class="wrap5">
<div class="nav-holder">

<!-- this space will be used for the menu !-->
</div>

<!-- nav holder !-->
</div>

<!-- wrap5 !-->
</div>

<!-- wrap4 !-->
</div>

<!-- wrap3 !-->
</div>

<!-- wrap2 !-->
</div>

<!-- wrap1 !-->
</div>

<!-- menu-wrap !-->

As you can see the code is pretty straight-forward. We have essentially stacked one layer on top of another and this way they’ll be able to hold their positions.

Next we want to add an image to the center of the wheel, or teardrop in this case. To do that we’ll simply add the following code in-between the wrap4 class and the completer class. This will lock the image to the center of the canvas. We’ll just use a Rockable image for this one because they’re awesome!

    <span class="img1"><img class="orbit orbit-frame" src="images/card18.jpg" alt="card08"></span>  

Now we’ll want to add some styling to each layer one by one.

#menu-wrap:

This will be the main container for your wheel menu. It also contains any universal fonts and font sizes effecting anything that’s inside of the div id=”menu-wrap”.

#menu-wrap{
	background:#e7e7e7; /* This isn't needed */
	height:600px; /* This is important and keeps the wheel in place when hovering over elements */
	font-family:sans-serif, Franklin Gothic Medium,Helvetica, Arial; /* If not using Franklin, it will automatically go to the next font in the family */
	font-size:14px; /* Establishes the global font size */
	letter-spacing: 1px !important; /* Effects spacing between letters for all fonts in the wheel */
	}

We’ll go ahead and make sure that our center image is styled correctly by placing it in the center of the wheel using margins, adding some dimensions to it and a border.

#menu-wrap .orbit{
	height: 210px;
    margin: 32px; /* Pushes the images in the display to the center */
    position: absolute;
	width: 210px;
	}

#menu-wrap .orbit-frame{
	border:2px solid #999; /* Creates a division between the image and wrap5 */
	}

All wrappers: We’ll want to create some styles that apply to all main wrappers by adding a universal border radius, putting them all in the center, adding a relative position so that everything stays contained and pushing them down to to get the even layered effect.

.wrap1, .wrap2, .wrap3, .wrap4, .wrap5, .nav-holder{  /* styles all of the wheel containers */
	-moz-border-radius: 220px 0 200px 220px;  /* firefox */
	-webkit-border-radius: 220px 0 200px 220px; /* webkit */
	border-radius: 220px 0 200px 220px;   /* opera */
 	margin:0 auto; /* centers all the wrappers relative to each other */
	position:relative !important;  /* Do not touch unless you know what you are doing */
	top:20px;
	}

.wrap1:

This is your biggest layer that sits behind all the others. We’re going to create a gradient red background and use a solid red fallback for older browers. We’ll also be using CSSpie to tell IE that it’s ok to use these styles. After that all we need to do is add a width and height and you’re done. You want to make sure the width and height are larger than all the other layers so that it shows behind them.

.wrap1{
	background: #FF0000; /* old browsers */
	background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/
	height:394px;
	width:394px;
	}

.wrap2:

Now for wrap 2 we’re going to do the exact same thing only we’ll use variations of white as the gradient, and add an outer and inner box shadow to create a slight bevel effect plus the backdrop shadow. Then we need to make the width and height about 40px smaller than the main layer to make it nice and even.

.wrap2{
	background: #FFFFFF; /* old browsers */
	background: -moz-linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCBE8F)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCBE8F',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FFFFFF 0%, #DCBE8F 100%); /*IE fix using Pie*/
 	height:354px;
	width:354px;
	-moz-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	-webkit-box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	box-shadow: 15px 31px 19px 8px rgba(0, 0, 0, 0.6), 0 -30px 46px -1px rgba(0, 0, 0, 0.65) inset;
	}

.wrap3 & 4:

We will now repeat the process for all the other wrappers using different colored gradients and making each layer 40px smaller than the last.

.wrap3{
	background: #FF0000; /* old browsers */
	background: -moz-linear-gradient(top, #FF0000 0%, #990000 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF0000), color-stop(100%,#990000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#990000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #FF0000 0%, #990000 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #FF0000 0%, #990000 100%); /*IE fix using Pie*/
 	height:314px;
	width:314px;
	}

.wrap4{
	border: 2px solid #FF0000;
	background: #990000; /* old browsers */
	background: -moz-linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#990000), color-stop(55%,#CC0000), color-stop(57%,#FF0000)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990000', endColorstr='#FF0000',GradientType=0 ); /* ie */
	background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(top, #990000 0%, #CC0000 55%, #FF0000 57%); /*IE fix using Pie*/
	-moz-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
	-webkit-box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
	box-shadow: 1px 1px 7px 2px rgba(0, 0, 0, 0.65), 1px 1px 0 2px rgba(125, 121, 32, 0.32) inset, 5px 5px 9px 6px rgba(221, 252, 116, 0.81) inset;
 	height:274px;
	width:274px;
	}

.wrap5 & .nav-holder:

Now we can style wrap5 and the nav-holder which will hold all the menu items in place and for the candycane style, we’ll make it black to add a nice neutral contrast while wrap5 will be white and will serve as the container for the center image. What we’re doing here is cutting out the background so that you can see through wrap5 and the nav-holder, making the other layers appear behind it as well as the center image. After making it transparent we’ll add a black border to the nav-holder and a white border to wrap5. The nav-holder’s border should be hidden on the right side (for the sub-menus), doubled on the left side (for the main menus) and solid for the rest creating a nice and easy effect while minimizing the amount of layers we have to add. Traditionally with this effect you could add up to 5 or 6 new layers, this saves a lot of code.

This time the wrap5 width and height will be 60px less than the other layers to make it nice and even again. Another 10px push at the top will help align the layer and an inner box shadow will give us a nice perspective of distance between wrap5 and the center image.

Adding a top of 0 to the nav-holder will automatically align the layers with the others. We’ll also use a negative margin for further top-left alignment and create a proportional height/width to make it fit nicely on top of the other layers.

.wrap5{
	-moz-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
	box-shadow: 9px 9px 5px 0 rgba(0, 0, 0, 0.75) inset, 5px 5px 5px 0 rgba(0, 0, 0, 0.75);
    border: 20px solid #FFF;  /* creates the wrap to see the image behind it */
    height: 214px;
    top: 10px;  /* center the element */
    width: 214px;
	}

.nav-holder{
	background: none repeat scroll 0 0 transparent;
    border-color: #121212;  /***  The border declarations are used to create the final wrapper, middle see through and hides the right border to show the submenus */
    border-style: solid hidden solid double;
    border-width: 73px medium 73px 73px;
    height: 252px;
    margin: -92px;  /*  centers the object on relative elements */
    top: 0;
    width: 324px;
	}

Well that was easy enough. So after you’ve finish all of that, hopefully you’ve learned something new to add to your skill-set already. However, this is what you’re creation should look like so far. If it doesn’t look like this, please go through the code again and see if you may have missed something… don’t worry, it’s probably something very minor.

The Completers: Hmm… does this look incomplete to you? We need to top it off with a couple of layers I’ve called completers so that we can hide parts of the center image and bring the nav-holder further around the other layers creating a nice rounded effect and closing it off.

To do what I’ve just mentioned is fairly simple. We can make most of the styling apply to both completers for less code. Let’s add a border radius to one side to make a nice curve, then we’ll use transform to align the completer between wrap1 and wrap5. Adding our background color is very important or nothing will show up. We have to make this layer absolute positioned and move it around to the right and top to get it lined up perfectly.

.completer1 will have a display of none for this teardrop style. On other styles such as the wheel we’ve deleted that part to make so that it does display.

.completer2 has a little more rotation and we need to push it down a little to make it fit.

.completer, .completer2{ /** absolute elements to hide the border of images **/
	-moz-border-radius: 0 120px 0 113px;  /* firefox */
	-webkit-border-radius: 0 120px 0 113px; /* webkit */
	border-radius: 0 120px 0 113px; /* opera */
    -moz-transform: rotate(-20deg); /* firefox */
	-webkit-transform: rotate(-21deg); /* webkit */
	-o-transform: rotate(-20deg); /* opera */
	-ms-transform: rotate(-20deg); /* ie9 and future versions */
	transform: rotate(-20deg); /* older browsers */
    background-color: #121212;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    height: 135px;
    position: absolute;
    right: -24px;
    top: -56px;
    width: 130px;
    }

.completer{
	display:none;
    }

.completer2{
	-moz-transform: rotate(110deg); /* firefox */
 	-webkit-transform: rotate(111deg); /* webkit */
	-o-transform: rotate(110deg); /* opera */
	-ms-transform: rotate(110deg); /* ie9 and future versions */
	transform: rotate(110deg); /* older browsers */
    top: 195px;
	}

After you’ve added the completers then you should have something like this… Again if you don’t have the same thing as what you see here, just check over your code and see what you missed.

Now we have a great set of layers to work with. They’re all contained nicely and have smooth CSS3 effects so let’s move on and get this baby working!

Step 2: The Navigation Menu Items and Sub-Menu Items

Now we want to add navigation links that look like they behind different layers. On the left side (in the double border) we want the main menu items and on the right side (in the open space) we want the sub-menu items to appear after a main item is hovered. You will be surprised how easy this is too accomplish so let’s dig in.

The Code:

There is a hover block to keep the menus active as you pass over the wheel with your mouse and we want to make sure that covers the entire wheel, so for the sake of IE compatability we will add a background with a 0.01 opacity otherwise IE won’t recognize that the element is even there.

Using margin-left: 76px ensures that you have enough room to hover over the main menu and the sub-menu as well as cross over the wheel without anything dissapearing.

ul.menuBuild, ul.menuBuild ul {
  	width: 80px;                 /* sets the size of the menu blocks */
  	background: rgb(0, 0, 0);
	/* RGBa with 0.01 opacity */
	background: rgba(0, 0, 0, 0.01); /* - a bg-color MUST be included for IE to work properly! */
  	padding-left: 0px;           /* stops the usual indent from ul */
  	margin-left: 76px;            /* Opera 7 final's margin and margin-box model cause problems */
	}

Now we want to remove the bullet points from each menu item or [li]. We also want to make sure that they are relative to the nav-holder.

You can add a border radius for a little extra styling. We’ll make the background a solid color and move the menu items to the left so they are barely touching the edges of the nav-holder.

The padding, text-indent and color are for extra styling and aren’t required for the menu to function.

ul.menuBuild li {
  	list-style-type: none;       /* removes the bullet points */
  	position: relative;
  	-webkit-border-radius: 0px 20px 20px 0px; /* webkit browsers */
  	-moz-border-radius: 0px 20px 20px 0px;  /* firefox */
  	border-radius: 0px 20px 20px 0px; /* opera */
  	background: none repeat scroll 0 0 #464646;
  	height: 14px;
  	left: -177px;
  	padding: 8px;
  	margin: 6px 0 0;
  	width:140px;
  	text-indent:5px;  /* How far the text is from the left edge of the menu */
  	color: #fff; /* sets the default font colour to white */
	}

Now let’s add a bit of gradient to the sub-menus and push it to the right and bump the first sub-menu item just barely to the edge of wrap5.

Adding a box-shadow will help us creat the effect of the sub-menu items being underneath their respective layers

ul.menuBuild ul.submenu li{
	background: #f2f2f2; /* old browsers */
	background: -moz-linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#565656), color-stop(3%,#666), color-stop(14%,#FFF)); /* webkit */
	background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*future CSS3 browsers*/
    -pie-background: url(bg-image.png) no-repeat, linear-gradient(left, #565656 0%, #666 3%, #FFF 14%); /*PIE*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#FFF',GradientType=1 );*/ /* ie */
	color:#464646;
	position:relative;
	left:296px; /* This is how the menu ends up on the other side of the wheel */
	-webkit-box-shadow: -2px 3px 12px -7px #161616;  /* webkit browsers */
	box-shadow: 16px 0 10px -8px #464646 inset; /* opera */
	-moz-box-shadow: -2px 3px 12px -7px #161616; /* firefox */
	}

Putting margins on each sub-menu item will let us create more separation and give the effect of each one being underneath a different layer.

You can also add an opacity for each item to make it fade from top to middle and from bottom to middle where the middle item has full opacity.

    ul.menuBuild ul.submenu li.first{  
        margin-left: -12px;  
        opacity: 0.70;  
        }  
      
    ul.menuBuild ul.submenu li.second, ul.menuBuild ul.submenu li.third{    margin-left:-12px;  
        opacity: 0.85;  
        }  
      
    ul.menuBuild ul.submenu li.last{  
        margin-left:55px;  
        opacity: 0.70;  
        }  

Ok so you’ve added your sub-menu but it’s still displays without any main menu being hovered over. To fix this we have to simply add a display none to the [ul].

ul.menuBuild li > ul{          /* using the > selector prevents many lesser browsers (and IE - see below) hiding child ULs */
  	display: none;         /* make child blocks hover without leaving space for them */
  	top: -169px;
  	position: absolute;
    right: -86px;
	color:#565656;
    width: 160px;
	-webkit-border-radius: 0 4px 4px 0; /* webkit */
	-moz-border-radius: 0 4px 4px 0;  /* firefox */
	border-radius: 0 4px 4px 0; /* opera */
	padding:50px;
    height: 24px;
	background: rgb(255, 255, 255);  /* Fallback for web browsers that don't support RGBa */
	background: rgba(255, 255, 255, 0.00);   /* RGBa with 0.01 opacity */
}

So now it doesn’t show up at all! Ok, let’s go ahead and make it display after a main item is hovered over. By using li:hover > ul we can tell that when a main menu [li] is hovered over then we will show the [ul] for the appropriate sub-menu by using display:block.

ul.menuBuild li:hover > ul {    /* one of the most important declarations - the browser must detect hovering over arbitrary elements, the > targets only the child ul, not any child uls of that child ul */
  	display: block;   /* makes the child block visible - one of the most important declarations */
  	position:absolute;
  	left:0;
  	width:400px;
  	height:200px;
	}

Styling for each main menu item.

For pure aesthetics we can add a border radius, box shadow and background. What is necessary is to create the height, width, absolute positioning and top margin.

The top margin allows us to push the first menu item down to where we want it, then we can use less margin to push down the rest of the items.

ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4{
	-webkit-border-radius: 20px 0 0 20px;  /* webkit */
	-moz-border-radius: 20px 0 0 20px;  /* firefox */
	border-radius: 20px 0 0 20px;  /* opera */
	-webkit-box-shadow:-2px 7px 8px -7px #161616;   /* webkit */
	-moz-box-shadow:-2px 7px 8px -7px #161616;  /* firefox */
	box-shadow:-16px 0 8px -7px #222222 inset;  /* opera */
	background: #F0000F; /* old browsers */
	background: -moz-linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /* firefox */
	background: -webkit-gradient(linear, left top, right top, color-stop(52%,#F0000F), color-stop(60%,#CC0000), color-stop(84%,#990000), color-stop(84%,#FFF), color-stop(85%,#464646), color-stop(92%,#363636), color-stop(100%,#121212)); 		/* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0000F', endColorstr='#121212',GradientType=1 ); /* ie */
	background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*future CSS3 browsers*/
	-pie-background: linear-gradient(left, #F0000F 52%, #CC0000 60%, #990000 84%, #FFF 84%, #464646 85%, #363636 92%, #121212 100%); /*IE fix using Pie*/
    height: 18px;
    padding: 8px;
    position: absolute;
	margin-top:100px;
	width:138px;
	}

For the remaining 3 menu items we’re going to add a top margin to each for even spacing between them and a margin left to bump them against the different layers.

Next we need to make sure to add the rotation to each item so that we can nicely fit the menu around the wheel.

ul.menuBuild li#menu2{
	-webkit-transform:rotate(-10deg); /* webkit */
	-moz-transform:rotate(-10deg);  /* firefox */
	-o-transform:rotate(-10deg); /* opera */
	-ms-transform: rotate(-10deg); /* ie9 and future versions */
	transform: rotate(-10deg); /* older browsers */
    margin-top: 141px;
	margin-left:5px;
	}

ul.menuBuild li#menu3{
	-webkit-transform:rotate(-21deg);  /* webkit */
	-moz-transform:rotate(-21deg); /* firefox */
	-o-transform:rotate(-21deg); /* opera */
	-ms-transform: rotate(-21deg); /* ie9 and future versions */
	transform: rotate(-21deg); /* older browsers */
    margin-top: 181px;
	margin-left:18px;
	}

ul.menuBuild li#menu4{
	-moz-transform: rotate(-32deg); /* firefox */
	-ms-transform: rotate(-32deg); /* ie9 and future versions */
	transform: rotate(-32deg); /* older browsers */
	-webkit-transform: rotate(-32deg); /* webkit */
	-o-transform: rotate(-32deg); /* opera */
    margin-top: 218px;
	margin-left:38px;
	}

After taking care of the main menu items we’re going to do the same thing for the sub-menu except for instead of making the menu items go around the wheel, we want them to be straight up and down. In order to do this we need to compensate for the rotation of the main menu by adding a rotation to each sub-menu.

Same as the main menu we need to add a top margin to even out the spacing between each one and push each sub-menu item to the right so they’re even closer to their respective layers.

ul.menuBuild li#menu1 > ul{
	margin-top:0;
	left:20px;
	}

ul.menuBuild li#menu2 > ul{
	-webkit-transform:rotate(10deg); /* webkit */
	-moz-transform:rotate(10deg); /* firefox */
	-o-transform:rotate(10deg); /* opera */
	-ms-transform: rotate(-10deg); /* ie9 and future versions */
	transform: rotate(-10deg); /* older browsers */
	left: 24px;
    margin-top: 6px;
	}

ul.menuBuild li#menu3 > ul{
	-webkit-transform:rotate(21deg); /* webkit */
	-moz-transform:rotate(21deg); /* firefox */
	-o-transform:rotate(21deg); /* opera */
	-ms-transform: rotate(-21deg); /* ie9 and future versions */
	transform: rotate(-21deg); /* older browsers */
	left: 27px;
    margin-top: 16px;
	}

ul.menuBuild li#menu4 > ul{
	-webkit-transform:rotate(32deg); /* webkit */
	-moz-transform:rotate(32deg); /* firefox */
	-o-transform:rotate(32deg); /* opera */
	-ms-transform: rotate(32deg); /* ie9 and future versions */
	transform: rotate(32deg); /* older browsers */
	left: 28px;
    margin-top: 27px;
	}

Finally we can add some optional styling to make the fonts faded out and then solid again when hovered over. This will bring each item to the front for the user when they hover over it.

These styles are not required for the menu to function but they do add some nice effects and increase usablility.

ul.menuBuild ul.submenu li a{
	color:#464646;  /* the color of submenu fonts */
	opacity:0.65;  /* This blends the font in with the background */
	filter:alpha(opacity=65);
	}

ul.menuBuild ul.submenu li a:hover{
	opacity:1.0;   /* and this brings the font opacity back to 100% */
	filter:alpha(opacity=100)
	}

ul.menuBuild li a {  /* for the main menu links */
	color: #FFBE8F;
	display: block;
	width: 100%;
	}

ul.menuBuild li:hover > a {
	color: #fff;
	border-left:double 5px #880000;  /* the indicator for when an item is hovered over */
	} /* do not use display: block; */

If you want to further style each individual sub-menu you can use the following code…

.sub1, .sub2, .sub3, .sub4{  
    } 

After you’ve finished the last part, you should have something like this… Once again if yours doesn’t look like the image below don’t worry, just go back and check your code.

What about IE?

Well for IE we can use CSSPIE in a separate stylesheet. I won’t go into it much because even with this fix IE doesn’t display properly. If you know of a better fix, please let me know in the comments.

Using behavior we can call the csspie php file to tell IE that the CSS3 styles are ok to use. So here is how it will work…

ul.menuBuild ul.submenu li, ul.menuBuild ul.submenu li.first, ul.menuBuild ul.submenu li.second,
 ul.menuBuild ul.submenu li.third, ul.menuBuild ul.submenu li.last, ul.menuBuild li > ul,
 ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, 
ul.menuBuild li#menu1, ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4,
 ul.menuBuild li#menu2, ul.menuBuild li#menu3, ul.menuBuild li#menu4, ul.menuBuild li#menu2 > ul,
 ul.menuBuild li#menu3 > ul, ul.menuBuild li#menu4 > ul, .wrap1, .wrap2, .wrap3, .wrap4, .wrap5, 
.nav-holder, .completer,
.completer2{behavior: url(styles/csspie/PIE.php); } /* CSS3 IE fix - Supports 'border-radius', 'box-shadow',
 'border-image', -pie-background', liinear-gradients', 'RGBA' */

A few other IE fixes go like this…

ul.menuBuild ul.submenu li{filter:alpha(opacity=70);} /* IE has too many problems for gradual opacity so we'll just use 70 for all submenus*/

.completer, .completer2{display:none;} /* transform doesn't work properly so we'll just hide the completers */

.nav-holder{ border-bottom-style:none; height:0px;}

That's it.

The article source:http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-a-css3-wheel-menu