SEE A LIVE EXAMPLE OF THIS MEGA DROP DOWN MENU HERE
CSS:
/* MEGAMENU DROPDOWN */
#megamenucontainer {
width: 100%;
height:43px;
margin-bottom: 5px;
}
ul#megamenu {
list-style-type: none;
width:940px;
margin:0px auto;
height:43px;
padding:0px 20px 0px 20px;
}
ul#megamenu ul{
list-style-type: none;
padding: 0;
margin: 0;
}
#megamenu > li {
position:relative;
float:left;
display:block;
padding: 5px 20px 20px 20px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
margin-right:30px;
margin-top:7px;
border:none;
}
#megamenu > li:hover {
z-index: 999999;
padding: 5px 20px 20px 20px;
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
#megamenu > li a {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color: #666;
display:block;
outline:0;
text-decoration:none;
}
#megamenu > li:hover a {
color:#333;
}
#megamenu li ul li a{
color: #999;
text-decoration: none;
-moz-transition-duration: .5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-o-transition-property: all;
-o-transition-duration: .5s;
padding: 5px;
}
#megamenu li ul li a:hover{
color: #000;
background: #CCC;
-moz-transition-duration: .5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-o-transition-property: all;
-o-transition-duration: .5s;
padding: 5px;
}
#example, .jcarouselcontainer {}
.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns {
position:absolute;
left:-999em;
text-align:left;
margin:4px auto;
padding:10px 5px 10px 5px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
background:url(http://store.interstateproducts.com/images/bg-noise.jpg);
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}
.dropdown_3columns .col_1 {min-height: 150px;}
.dropdown_3columns .col_1 ul li a{text-align: center !important;}
.dropdown_3columns .col_3 img{
float: left;
margin-right: 20px;
opacity: 1;
filter:alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
zoom: 1;
-moz-transition-duration: .5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-o-transition-property: all;
-o-transition-duration: .5s;
}
.dropdown_3columns .col_3 img:hover{
opacity: .6;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
zoom: 1;
-moz-transition-duration: .5s;
-moz-transition-property: all;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-o-transition-property: all;
-o-transition-duration: .5s;
}
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 380px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
#megamenu li:hover .dropdown_1column, #megamenu li:hover .dropdown_2columns, #megamenu li:hover .dropdown_3columns, #megamenu li:hover .dropdown_4columns, #megamenu li:hover .dropdown_5columns {
left:0px;
top:auto;
}
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:370px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
