Problema com centralização do menu

manoaj · Março 17, 2012

galera eu queria centralizar o conteudo do meu menu

css do menu

#wrapper_menu {
width:right;

top: 80px;

margin:0 auto;

display:block;

position: relative;

z-index:9999;

}

.menu {

list-style:none;

width:auto;

margin:30px auto 0px auto;

height:43px;

padding:0px 20px 0px 20px;

-moz-border-radius: 0px;

-webkit-border-radius: 0px;

border-radius: 0px;

}

.menu li {

float:left;

text-align:center;

position:relative;

margin-right:20px;

margin-top:6px;

border:none;

}

.menu li.fullwidth {

position: static !important;

}

.menu li:hover {

background:#eeeeee;

border:1px solid #444444;

border-bottom:none;

margin-right:19px;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

background: -o-linear-gradient(top, #F4F4F4, #EEEEEE);

-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

-khtml-border-radius: 5px 5px 0px 0px;

border-radius: 5px 5px 0px 0px;

}

.menu li.nodrop:hover {

background:#eeeeee;

border:1px solid #444444;

padding: 4px 10px 4px 9px;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

background: -o-linear-gradient(top, #F4F4F4, #EEEEEE);

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

.menu li.nodrop:hover a {

padding: 0px;

}

.menu li a {

color: #EEEEEE;

outline:0;

padding: 5px 10px 3px 10px;

text-decoration:none;

display:block;

text-shadow: 1px 1px 1px #000;

}

.menu li:hover a {

color:#161616;

text-shadow: none;

position:relative;

z-index:11;

border-bottom:1px solid #EEEEEE;

padding: 4px 9px 4px 9px;

}

.menu li:hover div a {

display:inline;

}

.menu li .drop {

padding-right:27px;

background:url("img/drop.png") no-repeat right 13px;

}

.menu li:hover .drop {

padding-right:27px;

background:url("img/drop.png") no-repeat right 12px;

}

/* Right aligned menu item */

.menu .right {

float:right;

right:0;

margin-right:0px;

}

.menu li.right:hover {

margin-right:-1px;

}

/* _______________________________________

02 DROP DOWN MENU

_______________________________________ */

/* Left & right aligned common styles */

.menu .dropdown_1column,

.menu .dropdown_2columns,

.menu .dropdown_3columns,

.menu .dropdown_4columns,

.menu .dropdown_5columns,

.menu .dropdown_fullwidth {

margin:4px auto;

left:-999em;

position:absolute;

background:#eeeeee;

border:1px solid #444444;

padding:10px;

text-align:left;

-moz-border-radius: 0px 5px 5px 5px;

-webkit-border-radius: 0px 5px 5px 5px;

-khtml-border-radius: 0px 5px 5px 5px;

border-radius: 0px 5px 5px 5px;

background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

background: -o-linear-gradient(top, #EEEEEE, #BBBBBB);

}

/* Drop Downs Sizes */

.menu .dropdown_1column {width: 145px;}

.menu .dropdown_2columns {width: 300px;}

.menu .dropdown_3columns {width: 455px;}

.menu .dropdown_4columns {width: 610px;}

.menu .dropdown_5columns {width: 765px;}

.menu .dropdown_fullwidth {

width: 920px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

-khtml-border-radius:5px;

border-radius:5px;

}

.menu li .first_fullwidth {

-moz-border-radius: 0px 5px 5px 5px;

-webkit-border-radius: 0px 5px 5px 5px;

border-radius: 0px 5px 5px 5px;

}

/* Showing Drop Down on Mouse Hover - Left aligned */

.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:25px;

}

.menu li:hover .dropdown_fullwidth {

left:21px;

top:33px;

display: block;

}

/* Showing Drop Down on Mouse Hover - Right aligned */

.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:25px;

}

.menu li.right:hover .dropdown_fullwidth {

right:18px;

top:33px;

}

/* Columns Sizes */

.menu .col_1,

.menu .col_2,

.menu .col_3,

.menu .col_4,

.menu .col_5,

.menu .col_6 {

display:inline;

float: left;

position: relative;

margin-left: 10px;

}

.menu .col_1 {width:145px;}

.menu .col_2 {width:300px;}

.menu .col_3 {width:455px;}

.menu .col_4 {width:610px;}

.menu .col_5 {width:765px;}

.menu .col_6 {width:920px;}

/* IMPORTANT */

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */

.menu .firstcolumn {

margin-left: 0; /* Clearing margin & left */

clear: left;

}

/* _______________________________________

03 CONTENT STYLING

_______________________________________ */

.menu p,

.menu ul,

.menu li,

.menu h2,

.menu h3 {

font-size:14px;

font-family:Arial, Helvetica, sans-serif;

line-height:21px;

text-align:left;

}

.menu p {

font-size:12px;

line-height:18px;

margin:0;

margin-bottom:10px;

text-shadow: 1px 1px 1px #FFFFFF;

}

.menu .strong {

font-weight:bold;

}

.menu .italic {

font-style:italic;

}

.menu h2,

.menu h3 {

text-shadow: 1px 1px 1px #FFFFFF;

border-bottom:1px solid #888888;

margin-top:7px;

}

.menu h2 {

font-weight:400;

font-size:21px;

margin-bottom:18px;

padding-bottom:11px;

}

.menu h3 {

font-weight:600;

font-size:14px;

margin-bottom:14px;

padding-bottom:7px;

}

.menu li:hover div a {

text-decoration:none;

text-shadow:none;

border:none;

padding:0;

}

.menu .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */

margin-top:18px;

}

/* Icon paragraphs */

.menu .help,

.menu .favorite,

.menu .mail,

.menu .print {

padding-left:36px;

margin-bottom:18px;

}

.menu .help {background:url("img/help.png") no-repeat 0px 2px;}

.menu .favorite {background:url("img/favorite.png") no-repeat 0px 2px;}

.menu .mail {background:url("img/mail.png") no-repeat 0px 2px;}

.menu .print {background:url("img/print.png") no-repeat 0px 2px;}

/* Images styles */

.menu .imgshadow_dark { /* Better style on dark background */

background:#FFFFFF;

padding:4px;

border:1px solid #333333;

margin-top:5px;

-moz-box-shadow:0px 0px 5px #000000;

-webkit-box-shadow:0px 0px 5px #000000;

box-shadow:0px 0px 5px #000000;

}

.menu .imgshadow_light { /* Better style on light background */

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;

}

.menu .img_left { /* Image sticks to the left */

width:auto;

float:left;

margin:2px 15px 5px 0px;

}

.menu .img_right { /* Image sticks to the right */

width:auto;

float:right;

margin:2px 0px 5px 15px;

}

/* Box styles */

.menu li .black_box,

.menu li .dark_grey_box {

color: #eeeeee;

text-shadow: 1px 1px 1px #000;

padding:4px 6px 4px 6px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

.menu li .black_box {

background-color:#333333;

-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 .dark_grey_box {

background-color:#555555;

-webkit-box-shadow:inset 0 0 3px #111111;

-moz-box-shadow:inset 0 0 3px #111111;

box-shadow:inset 0 0 3px #111111;

}

/* Standard lists styles */

.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:left;

text-align:left;

width:145px;

}

.menu li ul li a {

padding:0;

}

.menu li ul li:hover {

background:none;

border:none;

padding:0;

margin:0;

}

/* Greybox lists styles */

.menu li .greybox li {

background:#F4F4F4;

border:1px solid #bbbbbb;

margin:0px 0px 4px 0px;

padding:4px 6px 4px 6px;

width:131px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

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

}

/* Other lists styles */

.menu li .plus li {

background: url("img/plus.png") left 6px no-repeat;

margin:0px 0px 4px 0px;

padding:0px 0px 0px 21px;

width:109px;

}

.menu li .plus li:hover {

background: url("img/plus.png") left 6px no-repeat;

padding:0px 0px 0px 21px;

margin:0px 0px 4px 0px;

}

/* Social Icons */

.menu li ul.social {

list-style:none;

margin:0;

padding:0;

}

.menu li ul.social li {

padding-top:5px;

margin:0 12px 12px 0;

float:left;

position:relative;

display:inline;

width:32px;

}

.menu li ul.social li img {

border:none;

}

.menu li ul.social li:hover {

padding-top:5px;

margin:-1px 12px 12px 0;

}

.menu li ul.social li span {

display:none;

}

/* 2-Levels Drop Down */

.menu .levels, .menu .levels ul { /* all lists */

padding: 0;

margin: 0;

list-style: none;

}

.menu li:hover .levels a {

display:block;

}

.menu .levels a {

display: block;

width: 10em;

}

.menu .levels a.parent, .menu .levels a.parent:hover {

background: url("img/drop2.png") right center no-repeat;

}

.menu .levels li {

float: left;

width:150px;

}

.menu .levels li ul { /* second-level lists */

position: absolute;

border:1px solid #666666;

background:#EEEEEE;

top:-23px;

margin:15px 0px 0px 4px;

padding:6px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

background: -o-linear-gradient(top, #EEEEEE, #BBBBBB);

left: -999em;

}

.menu .levels li ul ul {

top:-23px;

}

.menu .levels li:hover ul ul, .menu .levels li:hover ul ul ul {

left: -999em;

}

.menu .levels li:hover ul, .menu .levels li li:hover ul, .menu .levels li li li:hover ul {

left: 142px;

}

/* _______________________________________

04 CONTACT FORM

_______________________________________ */

.menu form {

margin:0 0 12px 0;

padding:0px;

}

/* Labels & fieldsets stylings */

.menu fieldset {

margin:0;

border:none;

}

.menu form p {

margin:10px 0;

overflow:hidden;

width:270px;

}

.menu label {

float:left;

display:block;

text-align:left;

width:50px;

}

.menu input,

.menu textarea {

margin:0;

width:170px;

float:right;

color:#eeeeee;

background-color:#222222;

border:1px solid #0A0A0A;

padding:3px 5px 3px 5px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

-khtml-border-radius: 3px;

border-radius: 3px;

}

.menu textarea {

height:100px;

overflow:auto;

}

/* Buttons stylings */

.menu button {

float:right;

width:80px;

margin:0px;

margin-right:12px;

border:none;

padding: 2px 7px 2px 7px;

color:#eeeeee;

background-color:#222222;

border:1px solid #0A0A0A;

text-shadow: 1px 1px 1px #000;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

-khtml-border-radius: 3px;

border-radius: 3px;

}

/* _______________________________________

05 COLORS

_______________________________________ */

/* Black */

.menu_black {

background: #333;

border: 1px solid #444;

border-top: 1px solid #777;

background: -moz-linear-gradient(top, #555, #2a2a2a);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#2a2a2a));

background: -o-linear-gradient(top, #555, #2a2a2a);

}

.menu_black li:hover div a {

color:#444;

}

.menu_black li:hover div a:hover {

color:#777;

}

.menu_black li ul li a:hover {

color:#777;

}

/* Blue */

.menu_blue {

background: #014464;

border: 1px solid #015b86;

border-top: 1px solid #029feb;

background: -moz-linear-gradient(top, #0272a7, #013953);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

background: -o-linear-gradient(top, #0272a7, #013953);

}

.menu_blue li:hover div a {

color:#015b86;

}

.menu_blue li:hover div a:hover {

color:#029feb;

}

.menu_blue li ul li a:hover {

color:#029feb;

}

/* Brown */

.menu_brown {

background: #44391e;

border: 1px solid #5c4c29;

border-top: 1px solid #a28748;

background: -moz-linear-gradient(top, #736033, #382f19);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#736033), to(#382f19));

background: -o-linear-gradient(top, #736033, #382f19);

}

.menu_brown li:hover div a {

color:#5c4c29;

}

.menu_brown li:hover div a:hover {

color:#a28748;

}

.menu_brown li ul li a:hover {

color:#a28748;

}

/* Green */

.menu_green {

background: #3e5718;

border: 1px solid #52711f;

border-top: 1px solid #8bc135;

background: -moz-linear-gradient(top, #658c26, #354914);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#658c26), to(#354914));

background: -o-linear-gradient(top, #658c26, #354914);

}

.menu_green li:hover div a {

color:#52711f;

}

.menu_green li:hover div a:hover {

color:#8bc135;

}

.menu_green li ul li a:hover {

color:#8bc135;

}

/* Light Blue */

.menu_lightblue {

background: #52786b;

border: 1px solid #608c7d;

border-top: 1px solid #99b9ae;

background: -moz-linear-gradient(top, #709e8e, #52786b);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#709e8e), to(#52786b));

background: -o-linear-gradient(top, #709e8e, #52786b);

}

.menu_lightblue li:hover div a {

color:#608c7d;

}

.menu_lightblue li:hover div a:hover {

color:#99b9ae;

}

.menu_lightblue li ul li a:hover {

color:#99b9ae;

}

/* Orange */

.menu_orange {

background: #d24900;

border: 1px solid #f45500;

border-top: 1px solid #ff945b;

background: -moz-linear-gradient(top, #ff6717, #c14300);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6717), to(#c14300));

background: -o-linear-gradient(top, #ff6717, #c14300);

}

.menu_orange li:hover div a {

color:#f45500;

}

.menu_orange li:hover div a:hover {

color:#ff945b;

}

.menu_orange li ul li a:hover {

color:#ff945b;

}

/* Pink */

.menu_pink {

background: #910045;

border: 1px solid #b30055;

border-top: 1px solid #ff1a87;

background: -moz-linear-gradient(top, #d50066, #80003d);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d50066), to(#80003d));

background: -o-linear-gradient(top, #d50066, #80003d);

}

.menu_pink li:hover div a {

color:#b30055;

}

.menu_pink li:hover div a:hover {

color:#ff1a87;

}

.menu_pink li ul li a:hover {

color:#ff1a87;

}

/* Purple */

.menu_purple {

background: #6a5f71;

border: 1px solid #7b6f83;

border-top: 1px solid #ada5b3;

background: -moz-linear-gradient(top, #8c8094, #615867);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#8c8094), to(#615867));

background: -o-linear-gradient(top, #8c8094, #615867);

}

.menu_purple li:hover div a {

color:#7b6f83;

}

.menu_purple li:hover div a:hover {

color:#ada5b3;

}

.menu_purple li ul li a:hover {

color:#ada5b3;

}

/* Red */

.menu_red {

background: #830701;

border: 1px solid #a40802;

border-top: 1px solid #fd190f;

background: -moz-linear-gradient(top, #d70b02, #830701);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701));

background: -o-linear-gradient(top, #d70b02, #830701);

}

.menu_red li:hover div a {

color:#a40802;

}

.menu_red li:hover div a:hover {

color:#fd190f;

}

.menu_red li ul li a:hover {

color:#fd190f;

}

Diéssica · Março 18, 2012

Posta o HTML pra eu ver a estrutura :)

Tu pode adicionar um text-align:center, ou então fazer uma div responsável por todos os elementos e determinar margin:auto nela. Vai depender do modo que tu tá estruturou.

manoaj · Março 18, 2012

ja tem um text aligh center lá o html e este aqui.

<div id="wrapper_menu">

<ul class="menu menu_blue">

<li><a href="#" class="drop">Home</a>

<div class="dropdown_2columns">

<div class="col_2 firstcolumn">

<h2>Welcome !</h2>

<p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>

<p>This item comes with a large range of prepared typographic stylings such as headings, lists, <a href="#">links</a> etc.</p>

<h2 class="pusher">Cross Browser Support</h2>

<div class="col_1 firstcolumn">

<img src="img/browsers.png" width="125" height="46" alt="" />

</div>

<div class="col_1">

<p>This mega menu has been tested in all major browsers.</p>

</div>

<h2 class="pusher">Compatible Browsers</h2>

<div class="col_1 firstcolumn">

<ul class="plus">

<li>Internet Explorer</li>

<li>Firefox</li>

<li>Opera</li>

</ul>

</div>

<div class="col_1">

<ul class="plus">

<li>Chrome</li>

<li>Safari</li>

<li>What else ?</li>

</ul>

</div>

</div>

</div>

</li>

<li><a href="#" class="drop">5 Columns</a>

<div class="dropdown_5columns">

<div class="col_5 firstcolumn">

<h2>This is an example of a large container with 5 columns</h2>

<div class="col_1 firstcolumn">

<p class="dark_grey_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>

</div>

<div class="col_1">

<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>

</div>

<div class="col_1">

<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>

</div>

<div class="col_1">

<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>

</div>

<div class="col_1">

<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>

</div>

</div>

<div class="col_5 firstcolumn">

<h2>Here is some content with side images</h2>

<div class="col_3 firstcolumn">

<img src="img/01.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />

<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<br /><a href="#">Read more...</a></p>

<img src="img/02.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />

<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<br /><a href="#">Read more...</a></p>

</div>

<div class="col_2">

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div>

</div>

</li>

<li><a href="#" class="drop">4 Columns</a>

<div class="dropdown_4columns">

<div class="col_4 firstcolumn">

<h2>This is a heading title</h2>

<div class="col_2 firstcolumn">

<p class="favorite">This is a paragraph with a favorite icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>

<p class="help">This is a paragraph with a help icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>

</div>

<div class="col_2">

<p class="mail">This is a paragraph with a mail icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>

<p class="print">This is a paragraph with a print icon. Donec tortor sem, venenatis vitae lobortis ac, cursus vel lacus. </p>

</div>

</div>

<div class="col_1 firstcolumn">

<h3>Some Links</h3>

<ul>

<li><a href="#">ThemeForest</a></li>

<li><a href="#">GraphicRiver</a></li>

<li><a href="#">ActiveDen</a></li>

<li><a href="#">VideoHive</a></li>

<li><a href="#">3DOcean</a></li>

</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>

<ul>

<li><a href="#">NetTuts</a></li>

<li><a href="#">VectorTuts</a></li>

<li><a href="#">PsdTuts</a></li>

<li><a href="#">PhotoTuts</a></li>

<li><a href="#">ActiveTuts</a></li>

</ul>

</div>

<div class="col_1">

<h3>Other Stuff</h3>

<ul>

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#">Creattica</a></li>

<li><a href="#">WorkAwesome</a></li>

<li><a href="#">Mac Apps</a></li>

<li><a href="#">Web Apps</a></li>

</ul>

</div>

<div class="col_1">

<h3>Misc</h3>

<ul>

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

</li>

<li><a href="#" class="drop">3 columns</a>

<div class="dropdown_3columns">

<div class="col_3 firstcolumn">

<h2>Lists in Boxes</h2>

<div class="col_1 firstcolumn">

<ul class="greybox">

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#">Creattica</a></li>

<li><a href="#">WorkAwesome</a></li>

<li><a href="#">Mac Apps</a></li>

<li><a href="#">Web Apps</a></li>

</ul>

</div>

<div class="col_1">

<ul class="greybox">

<li><a href="#">ThemeForest</a></li>

<li><a href="#">GraphicRiver</a></li>

<li><a href="#">ActiveDen</a></li>

<li><a href="#">VideoHive</a></li>

<li><a href="#">3DOcean</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>

<div class="col_3 firstcolumn">

<h2 class="pusher">Here are some image examples</h2>

<img src="img/03.jpg" width="70" height="70" class="img_right imgshadow_light" alt="" />

<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<br /><a href="#">Read more...</a></p>

<img src="img/04.jpg" width="70" height="70" class="img_left imgshadow_light" alt="" />

<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada.<br /><a href="#">Read more...</a></p>

</div>

</div>

</li>

<li><a href="#" class="drop">2 columns</a>

<div class="dropdown_2columns">

<div class="col_1 firstcolumn">

<h3>Some Links</h3>

<ul>

<li><a href="#">ThemeForest</a></li>

<li><a href="#">GraphicRiver</a></li>

<li><a href="#">ActiveDen</a></li>

<li><a href="#">VideoHive</a></li>

<li><a href="#">3DOcean</a></li>

</ul>

</div>

<div class="col_1">

<h3>Useful Links</h3>

<ul>

<li><a href="#">NetTuts</a></li>

<li><a href="#">VectorTuts</a></li>

<li><a href="#">PsdTuts</a></li>

<li><a href="#">PhotoTuts</a></li>

<li><a href="#">ActiveTuts</a></li>

</ul>

</div>

<div class="col_1 firstcolumn">

<h3>Other Stuff</h3>

<ul>

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#">Creattica</a></li>

<li><a href="#">WorkAwesome</a></li>

<li><a href="#">Mac Apps</a></li>

<li><a href="#">Web Apps</a></li>

</ul>

</div>

<div class="col_1">

<h3>Misc</h3>

<ul>

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

</li>

<li><a href="#" class="drop">Drop Down</a>

<div class="dropdown_1column">

<div class="col_1 firstcolumn">

<ul class="levels">

<li><a href="#">FreelanceSwitch</a></li>

<li><a href="#" class="parent">Creattica</a>

<ul>

<li><a href="#">This is a</a></li>

<li><a href="#">Second Level</a></li>

<li><a href="#">Submenu</a></li>

</ul>

</li>

<li><a href="#">WorkAwesome</a></li>

<li><a href="#">Mac Apps</a></li>

<li><a href="#" class="parent">Web Apps</a>

<ul>

<li><a href="#">Another</a></li>

<li><a href="#" class="parent">Drop Down</a>

<ul>

<li><a href="#">This is a</a></li>

<li><a href="#">Second</a></li>

<li><a href="#">Level</a></li>

<li><a href="#">Submenu</a></li>

</ul>

</li>

<li><a href="#">Menu</a></li>

</ul>

</li>

<li><a href="#">NetTuts</a></li>

<li><a href="#" class="parent">VectorTuts</a>

<ul>

<li><a href="#">Put anything</a></li>

<li><a href="#">You want</a></li>

<li><a href="#" class="parent">Here</a>

<ul>

<li><a href="#">Unlimited</a></li>

<li><a href="#">Possibilities</a></li>

<li><a href="#">With this</a></li>

<li><a href="#">Mega Menu</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#">PsdTuts</a></li>

<li><a href="#">PhotoTuts</a></li>

<li><a href="#">ActiveTuts</a></li>

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

</li>

<li class="nodrop"><a href="#">No Drop</a></li>

<li class="right"><a href="#" class="drop">Contact</a>

<div class="dropdown_2columns align_right">

<div class="col_2 firstcolumn">

<h2>Contact Us</h2>

<form action="post">

<fieldset>

<p><label>Name</label><input type="text" size="30" /></p>

<p><label>Email</label><input type="text" size="30" /></p>

<p><label>Subject</label><input type="text" size="30" /></p>

<p><label>Message</label><textarea cols="30" rows="10"></textarea></p>

<button type="submit" class="submit">Send</button>

</fieldset>

</form>

</div>

<div class="col_2 firstcolumn">

<h2>Find us on social networks</h2>

<ul class="social">

<li><a href="#"><img src='img/twitter.png' alt="" /><span>Twitter</span></a></li>

<li><a href="#"><img src='img/facebook.png' alt="" /><span>Facebook</span></a></li>

<li><a href="#"><img src='img/flickr.png' alt="" /><span>Flickr</span></a></li>

<li><a href="#"><img src='img/rss.png' alt="" /><span>RSS Feed</span></a></li>

<li><a href="#"><img src='img/technorati.png' alt="" /><span>Technorati</span></a></li>

<li><a href="#"><img src='img/delicious.png' alt="" /><span>Delicious</span></a></li>

</ul>

</div>

</div>

</li>

</ul>

</div>

Diéssica · Março 18, 2012

Tentou a segunda opção?

Evandro Oliveira · Março 19, 2012

whataf... é

width:right

??????

NetBoy16 · Março 19, 2012

kkk, width:right ? nao seria float:right ? talvez esse seja o problema no alinhamento :thumbsup:

Entrar

Arquivado

Problema com centralização do menu

Recommended Posts

manoaj 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

manoaj 12

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante