Variable Visions

Articles CSS CSS-Mega-Drop-Down-Menu


tutorials - CSS and Web-Development.

CSS Mega Drop Down Menu

Published Fri. Jan. 25, 2013


Use pure CSS for this drop down menu

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;}


Tag(s): CSS mega drop down menu