Denunciar Menu Dropdown devidamente centralizado porém levemente a direita em Tutoriais & Dicas - HTML, XHTML, CSS Postado Janeiro 9, 2015 Olá, no HTML5 evite usar nas tag HTML o atributo align, pois o CSS já foi feito pra isso. O que foi preciso fazer é colocar no CSS body {margin:0px; padding:0px; } /*Para zerar as margens e padding de todos os elementos no BODY */ #menubg { top: 0px; padding: 0px; margin-top: 0em; width: 100%; height: 4em; position: fixed; z-index: 1; opacity: 0.8; background-color: #FFFFFF; } #menu { width: 70em; margin-left: auto; margin-right: auto; font: 1.200em Frutiger; font-weight: light; text-align: center; } /* Adicionado para centralizar o menu */ #menu nav { margin-left: auto; margin-right: auto; width: auto; text-align: center; } #menu a { color: #17490c; text-decoration: none; } #menu ul { margin-top: 0em; list-style: none; display: inline; } #menu ul li { background-color: rgba(255, 255, 255, 0.8); padding: 1em; display: inline-block; position: relative; } #menu ul li ul { display: none; position: absolute; left: -25px; /* Deixar o Submenu no centro */ font-size: 0.750em; text-align: center; visibility: hidden; width: 10em; padding: 1.6em; } #menu ul li ul li { display: block; border-bottom: 0.150em solid #17490c; } #menu ul li:hover ul { display: block; visibility: visible; }
Menu Dropdown devidamente centralizado porém levemente a direita
em Tutoriais & Dicas - HTML, XHTML, CSS
Postado
Olá, no HTML5 evite usar nas tag HTML o atributo align, pois o CSS já foi feito pra isso.
O que foi preciso fazer é colocar no CSS
body {margin:0px; padding:0px; } /*Para zerar as margens e padding de todos os elementos no BODY */
#menubg {
top: 0px;
padding: 0px;
margin-top: 0em;
width: 100%;
height: 4em;
position: fixed;
z-index: 1;
opacity: 0.8;
background-color: #FFFFFF;
}
#menu {
width: 70em;
margin-left: auto;
margin-right: auto;
font: 1.200em Frutiger;
font-weight: light;
text-align: center;
}
/* Adicionado para centralizar o menu */
#menu nav {
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
#menu a {
color: #17490c;
text-decoration: none;
}
#menu ul {
margin-top: 0em;
list-style: none;
display: inline;
}
#menu ul li {
background-color: rgba(255, 255, 255, 0.8);
padding: 1em;
display: inline-block;
position: relative;
}
#menu ul li ul {
display: none;
position: absolute;
left: -25px; /* Deixar o Submenu no centro */
font-size: 0.750em;
text-align: center;
visibility: hidden;
width: 10em;
padding: 1.6em;
}
#menu ul li ul li {
display: block;
border-bottom: 0.150em solid #17490c;
}
#menu ul li:hover ul {
display: block;
visibility: visible;
}