Results 1 to 1 of 1

Thread: please need help align center mega menu drop down (full width )

  1. #1
    Join Date
    Aug 2010
    Location
    Indonesia at Jakarta
    Posts
    23
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default please need help align center mega menu drop down (full width )

    need help to solve this problem, i want align center drop down menu to menu bar in weight 912px, i paste the html code and the css.

    thanks for helping me solve my problem. thanks


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="tombol.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    	background-color: #666666;
    }
    -->
    </style></head>
    
    <body>
    <table width="912" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        
        <ul id="menu">  
            <li><a href="#">Home</a></li>  
            <li><a href="#">Our Company</a></li>
            
            
                    <li class="fullwidth"><a href="#" class="drop">Solutions</a>  
                <div class="dropdown_5columns">  
                    <div class="col_5">  
                    <p>This is a 5 Columns content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_4">  
                    <p>This is a 4 Columns content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_3">  
                    <p>This is a 3 Columns content</p>  
                    </div>  
                    <div class="col_2">  
                    <p>This is a 2 Columns content</p>  
                    </div>  
                </div>  
            </li>
            
            
            <li class="fullwidth"><a href="#" class="drop">Products</a>  
                <div class="dropdown_5columns">  
                    <div class="col_5">  
                    <p>testing with no p</p>  
    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_4">  
                    <p>This is a 4 Columns content</p>  
                    </div>  
                    <div class="col_1">  
                    <p>This is a 1 Column content</p>  
                    </div>  
                    <div class="col_3">  
                    <p>This is a 3 Columns content</p>  
                    </div>  
                    <div class="col_2">  
                    <p>This is a 2 Columns content</p>  
                    </div>  
                </div>  
            </li>
            
            
              
            <li><a href="#">How It's Works</a></li>
            <li><a href="#">Our Projects</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact us</a></li>     
        </ul>
        
        </td>
      </tr>
    </table>
          
    <p>&nbsp;</p>
    <table width="912" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    <p>&nbsp;</p>
    </body>
    </html>
    the css code:


    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #menu {  
        list-style:none;  
        width:912px;  
        margin:0;  
        height:43px;  
        padding:0;   
        /* Background color and gradients */  
        background: #6c7a7f;  
        background: -moz-linear-gradient(top, #99a2a6, #636f73);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
        /* Borders */  
        border: 1px solid #5e6868;
    	border: 1px solid #7b8c92;
        -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
        -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
        box-shadow:inset 0px 0px 1px #edf9ff; 
    	}
    
    
        /* jarak kotak dalam sub menu */  
    #menu li {  
        float:left;  
        display:block;  
        text-align:center;  
        position:relative;
    	padding-top:7px;
        border:none;  
    	}
    	
    #menu li.fullwidth {
    
    	position:static;
    	
    }
    
    #menu li:hover {  
        /* Background color and gradients */  
        background: #83b60c;  
        background: -moz-linear-gradient(top, #abe426, #72a705);  
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    	height:36px;
    
    }
    
    #menu li a {
    		font-family:Verdana, Arial, Helvetica, sans-serif;    
    		text-shadow: 1px 1px 1px #4d4d4d; 
            font-size:12px;
    		padding: 4px 24px;
            color: #ffffff;  
            display:block;  
            outline:0;
            text-decoration:none;  
        }  
    #menu li.fullwidth{
    
    	position:static;
    	}
    
    
    /* mulai drop down*/
    
    
    .dropdown_1column, 
    .dropdown_2columns, 
    .dropdown_3columns, 
    .dropdown_4columns,
    .dropdown_5columns {
    	
    	float:left;
    	position:absolute;
    	left:-999em; /* Hides the drop down */
    	text-align:left;
    	padding:20px;
    	box-shadow: inset 0px 0px 1px #999999;
    	/* Gradient background */
    	background:#FFFFFF;
    
    
    }
    
    .dropdown_1column {width: 140px;}
    .dropdown_2columns {width: 280px;}
    .dropdown_3columns {width: 420px;}
    .dropdown_4columns {width: 560px;}
    .dropdown_5columns {width: 875px;}
    
    #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 {
    	position:fixed;
    	
    	left: 503px;
    	
    	top: 44px;
    }
    
    .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:900px;}
    
    #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;
    }
    Last edited by xaverius; 03-05-2013 at 03:27 PM. Reason: Resolve by wife

Similar Threads

  1. Resolved center align/float Amazon style drop in box?
    By eTard in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-23-2012, 06:33 PM
  2. Mega Menu 960px width ?
    By mulaus in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-06-2012, 03:52 PM
  3. Resolved Full width CSS menu bar?
    By mlegg in forum CSS
    Replies: 6
    Last Post: 02-26-2011, 07:29 PM
  4. Resolved All Levels Navigational Menu: Align center on page
    By dropdown in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-23-2008, 12:24 AM
  5. Any DHTML menu script can align center?
    By loeddie in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-17-2005, 06:59 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •