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
the css code: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> </p> <table width="912" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> <tr> <td> </td> </tr> </table> <p> </p> </body> </html>
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; }
CSS Codes
Reply With Quote
Bookmarks