Mega Drop Down Menu

Create index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<title>Mega Drop Down Menu</title>

</head>
<body>
<ul id="menu">
     
    <li><a href="#" class="drop">Home</a>
     
        <div class="dropdown_2columns">
     
            <div class="col_2">
                <h2>HTML5</h2>
            </div>
     
            <div class="col_2">
                <p><a href="#">Html5</a></p>             
                <p><a href="#">Css3</a></p>             
            </div>
     
            <div class="col_2">
                <h2>Web design</h2>
            </div>
             
            <div class="col_1">
                <img src="tree.png" width="125" height="85" alt="" />
            </div>
             
            <div class="col_1">
                <p><a href="#">Photoshop</a></p>
                <p><a href="#">Corel draw</a></p>
            </div>
           
        </div>
     
    </li>
 
    <li><a href="#" class="drop">About</a>
     
        <div class="dropdown_5columns">
         
            <div class="col_5">
                <h2>We are doing Web designing and development.</h2>
            </div>
             
            <div class="col_1">
                <p class="black_box">We have developed many websites like e-commerace,
                shopping cart,CRM projects,and designed many company logo</p>
            </div>
             
            <div class="col_1">
            <p>
                <p><a href="#">Project1</a></p>
                <p><a href="#">Project2</a></p>
                <p><a href="#">Project3</a></p>
                <p><a href="#">Project4</a></p>
                </p>
            </div>
             
            <div class="col_1">
                <p class="italic">
                
                <p><a href="#">Project1</a></p>
                <p><a href="#">Project2</a></p>
                <p><a href="#">Project3</a></p>
                <p><a href="#">Project4</a></p>
                
                
                </p>
            </div>
             
            <div class="col_1">
            <p>
                <p><a href="#">Project1</a></p>
                <p><a href="#">Project2</a></p>
                <p><a href="#">Project3</a></p>
                <p><a href="#">Project4</a></p>
                </p>
            </div>
             
            <div class="col_1">
                <p class="strong">
                
                <p><a href="#">Project1</a></p>
                <p><a href="#">Project2</a></p>
                <p><a href="#">Project3</a></p>
                <p><a href="#">Project4</a></p>
                </p>
            </div>
         
            <div class="col_5">
                <h2>Our Portfolio</h2>
            </div>
            
            <div class="col_3">
             
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
         
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
                <p>This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p>
             
            </div>
             
            <div class="col_2">
             
                <p class="black_box">This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project This is e-commerace project,in this project, multivendor facility, multiple access of accounts and they can show multiple products at a time, there and many security facilities in this project<a href="#">Read more...</a></p></p>
             
            </div>
         
        </div>
     
    </li>
 
    <li><a href="#" class="drop">Clients</a>
     
        <div class="dropdown_4columns">
         
            <div class="col_4">
                <h2>Our clients</h2>
            </div>
             
            <div class="col_1">
             
                <h3>Clients</h3>
                <ul>
                    <li><a href="#">Client1</a></li>
                    <li><a href="#">Client2</a></li>
                    <li><a href="#">Client3</a></li>
                    <li><a href="#">Client4</a></li>
                    <li><a href="#">Client5</a></li>
                </ul>   
                  
            </div>
     
            <div class="col_1">
             
                <h3>Clients</h3>
                <ul>
                     <li><a href="#">Client1</a></li>
                    <li><a href="#">Client2</a></li>
                    <li><a href="#">Client3</a></li>
                    <li><a href="#">Client4</a></li>
                    <li><a href="#">Client5</a></li>
                </ul>   
                  
            </div>
     
            <div class="col_1">
             
                <h3>Clients</h3>
                <ul>
                     <li><a href="#">Client1</a></li>
                    <li><a href="#">Client2</a></li>
                    <li><a href="#">Client3</a></li>
                    <li><a href="#">Client4</a></li>
                    <li><a href="#">Client5</a></li>
                </ul>   
                  
            </div>
     
            <div class="col_1">
             
                <h3>Clients</h3>
                <ul>
                     <li><a href="#">Client1</a></li>
                    <li><a href="#">Client2</a></li>
                    <li><a href="#">Client3</a></li>
                    <li><a href="#">Client4</a></li>
                    <li><a href="#">Client5</a></li>
                </ul>   
                  
            </div>
             
        </div>
     
    </li>
 
    <li class="menu_right"><a href="#" class="drop">Products</a>
     
        <div class="dropdown_1column align_right">
         
                <div class="col_1">
                 
                    <ul class="simple">
                   <li><a href="#">Product1</a></li>
                    <li><a href="#">Product2</a></li>
                    <li><a href="#">Product3</a></li>
                    <li><a href="#">Product4</a></li>
                    <li><a href="#">Product5</a></li>
                    
                     <li><a href="#">Product1</a></li>
                    <li><a href="#">Product2</a></li>
                    <li><a href="#">Product3</a></li>
                    <li><a href="#">Product4</a></li>
                    <li><a href="#">Product5</a></li>
                    </ul>   
                      
                </div>
                 
        </div>
         
    </li>
 
    <li class="menu_right"><a href="#" class="drop">Contacts</a>
     
        <div class="dropdown_3columns align_right">
             
            <div class="col_3">
                <h2>Link with us</h2>
            </div>
             
            <div class="col_1">
     
                <ul class="greybox">
                    <li><a href="#">Fb</a></li>
                    <li><a href="#">Lin</a></li>
                    <li><a href="#">Tw</a></li>
                    <li><a href="#">Flicker</a></li>
                    <li><a href="#">Yahoo!</a></li>
                </ul>   
     
            </div>
             
            <div class="col_1">
     
                <ul class="greybox">
                    <li><a href="#">G+</a></li>
                    <li><a href="#">FB</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <li><a href="#">Youtube</a></li>
                    <li><a href="#">Dribble</a></li>
                </ul>   
     
            </div>
             
            <div class="col_1">
     
                <ul class="greybox">
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">Flash</a></li>
                    <li><a href="#">Illustration</a></li>
                    <li><a href="#">More...</a></li>
                </ul>   
     
            </div>
             
            <div class="col_3">
                <h2>Private Policy</h2>
            </div>
             
            <div class="col_3">
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
                
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
     
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
                
                <img src="tree.png" width="70" height="70" class="img_left imgshadow" alt="" />
                
            </div>
         
        </div>
         
    </li>
 
 
</ul>
 
</body>
 
</html>

Create style.css

@charset "utf-8";
body, ul, li {
    font-size:14px; 
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    text-align:left;
}
 
/* Navigation Bar */
 
#menu {
    list-style:none;
    width:940px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;
 
    /* Rounded Corners */
     
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    /* Background color and gradients */
     
    background: #014464;
    background: -moz-linear-gradient(center top , #333333, #666666);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#666666));
 
     
    /* Borders */
     
    border: 1px solid #002232;
 
    -moz-box-shadow:inset 0px 0px 1px #edf9ff;
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    box-shadow:inset 0px 0px 1px #edf9ff;
}
 
#menu li {
    float:left;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}
 
#menu li:hover {
    border: 1px solid #777777;
    padding: 4px 9px 4px 9px;
     
    /* Background color and gradients */
     
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
     
    /* Rounded corners */
     
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
}
 
#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #EEEEEE;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}
 
#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
    background:url("img/drop.png") no-repeat right 7px;
}
 
/* Drop Down */
 
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
     
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #669900, #669933);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#669900), to(#669933));
 
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}
 
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
 
#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}
 
/* Columns */
 
.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:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}
 
/* Right alignment */
 
#menu .menu_right {
    float:right;
    margin-right:0px;
}
#menu li .align_right {
    /* Rounded Corners */
    -moz-border-radius: 5px 0px 5px 5px;
    -webkit-border-radius: 5px 0px 5px 5px;
    border-radius: 5px 0px 5px 5px;
}
#menu li:hover .align_right {
    left:auto;
    right:-1px;
    top:auto;
}
 
/* Drop Down Content Stylings */
 
#menu p, #menu h2, #menu h3, #menu ul li {
    font-family:Arial, Helvetica, sans-serif;
    line-height:21px;
    font-size:12px;
    text-align:left;
    text-shadow: 1px 1px 1px #FFFFFF;
}
#menu h2 {
    font-size:21px;
    font-weight:400;
    letter-spacing:-1px;
    margin:7px 0 14px 0;
    padding-bottom:14px;
    border-bottom:1px solid #666666;
}
#menu h3 {
    font-size:14px;
    margin:7px 0 14px 0;
    padding-bottom:7px;
    border-bottom:1px solid #888888;
}
#menu p {
    line-height:18px;
    margin:0 0 10px 0;
}
 
#menu li:hover div a {
    font-size:12px;
    color:#3333FF;
}
#menu li:hover div a:hover {
    color:#003333;
}
.strong {
    font-weight:bold;
}
.italic {
    font-style:italic;
}
.imgshadow {
    background:#FFFFFF;
    padding:4px;
    border:1px solid #777777;
    margin-top:5px;
    -moz-box-shadow:0px 0px 5px #666666;
    -webkit-box-shadow:0px 0px 5px #666666;
    box-shadow:0px 0px 5px #666666;
}
.img_left { /* Image sticks to the left */
    width:auto;
    float:left;
    margin:5px 15px 5px 5px;
}
#menu li .black_box {
    background-color:#333333;
    color: #eeeeee;
    text-shadow: 1px 1px 1px #000;
    padding:4px 6px 4px 6px;
 
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
 
    /* Shadow */
    -webkit-box-shadow:inset 0 0 3px #000000;
    -moz-box-shadow:inset 0 0 3px #000000;
    box-shadow:inset 0 0 3px #000000;
}
#menu li ul {
    list-style:none;
    padding:0;
    margin:0 0 12px 0;
}
#menu li ul li {
    font-size:12px;
    line-height:24px;
    position:relative;
    text-shadow: 1px 1px 1px #ffffff;
    padding:0;
    margin:0;
    float:none;
    text-align:left;
    width:130px;
}
#menu li ul li:hover {
    background:none;
    border:none;
    padding:0;
    margin:0;
}
#menu li .greybox li {
    background:#F4F4F4;
    border:1px solid #bbbbbb;
    margin:0px 0px 4px 0px;
    padding:4px 6px 4px 6px;
    width:116px;
 
    /* Rounded Corners */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
#menu li .greybox li:hover {
    background:#ffffff;
    border:1px solid #aaaaaa;
    padding:4px 6px 4px 6px;
    margin:0px 0px 4px 0px;
}

CSS and CSS3 TutorialS

Search This Blog