Linton Junior Postado Janeiro 29, 2014 Denunciar Share Postado Janeiro 29, 2014 Olá, pessoal, tenho um menu em css, porem ele fica no lado esquerdo e como não entendo de css gostaria de ajuda pra centralizar. Segue os códigos. Este é o menu, ele é horizontal <div id='cssmenu'> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class='has-sub'><a href='#'><span>Menu</span></a> <ul> <li class='has-sub'><a href='#'><span>Menu2</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> <li class='has-sub'><a href='#'><span>Menu3</span></a> <ul> <li><a href='#'><span>Sub Item</span></a></li> <li class='last'><a href='#'><span>Sub Item</span></a></li> </ul> </li> </ul> </li> <li><a href='#'><span>menu4</span></a></li> <li class='last'><a href='#'><span>fale conosco</span></a></li> </ul> </div> Aqui é o CSS: #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu span, #cssmenu a { margin: 0; padding: 0; position: relative; border: 0; line-height: 1; box-sizing: content-box; } #cssmenu { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0)); background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%); background: linear-gradient(top, #fefefe 0%, #eee9f0 100%); border-bottom: 2px solid #0914e8; width: auto; } #cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; } #cssmenu a { background: #fefefe; background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec)); background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%); background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%); background: linear-gradient(top, #fefefe 0%, #ececec 100%); color: #000; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none; } #cssmenu ul { list-style: none; } #cssmenu > ul { float: left; } #cssmenu > ul > li { float: left; } #cssmenu > ul > li > a { color: #000; font-size: 12px; } #cssmenu > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0914e8; ; } #cssmenu > ul > li:first-child > a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; } #cssmenu > ul > li.active:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #0914e8; ; } #cssmenu > ul > li.active > a { -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); } #cssmenu > ul > li:hover > a { background: #ececec; background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef)); background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%); background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%); -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1); } #cssmenu .has-sub { z-index: 1; } #cssmenu .has-sub:hover > ul { display: block; } #cssmenu .has-sub ul { display: none; position: absolute; width: 200px; top: 100%; left: 0; } #cssmenu .has-sub ul li { *margin-bottom: -1px; } #cssmenu .has-sub ul li a { background: #0914e8; border-bottom: 1px dotted #2d37f7; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px; color: #ffffff; } #cssmenu .has-sub ul li:hover a { background: #0710b7; } #cssmenu .has-sub .has-sub:hover > ul { display: block; } #cssmenu .has-sub .has-sub ul { display: none; position: absolute; left: 100%; top: 0; } #cssmenu .has-sub .has-sub ul li a { background: #0710b7; border-bottom: 1px dotted #2d37f7; } #cssmenu .has-sub .has-sub ul li a:hover { background: #060e9e; } Grato a quem puder ajudar :) Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 jefmolino Postado Fevereiro 11, 2014 Denunciar Share Postado Fevereiro 11, 2014 Adiciona isso .has-sub{ text-align: center; } Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Linton Junior
Olá, pessoal, tenho um menu em css, porem ele fica no lado esquerdo e como não entendo de css gostaria de ajuda pra centralizar.
Segue os códigos.
Este é o menu, ele é horizontal
Aqui é o CSS:
Grato a quem puder ajudar :)
Link para o comentário
Compartilhar em outros sites
1 resposta a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.