How to Center Menu in css?

Asked

Viewed 4,812 times

2

I would like to know how to center the menu below:

.dropdownmenu ul, .dropdownmenu li {
	margin: 0;
	padding: 0;
}
.dropdownmenu ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.dropdownmenu li {
	float: right;
	position: relative;
	width: 200px;
}
.dropdownmenu a {
	background: #30A6E6;
	color: #ffffff;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.dropdownmenu li:hover a {
	background: #000000;
}
#submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #000000;
}
#submenu a {
	background-color:#30A6E6;
}
<body>
  <nav class="dropdownmenu">
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="sobre.html">Sobre</a>
      <ul id="submenu">
        <li><a href="#">História</a></li>
        <li><a href="sejasocio.html">Seja Sócio</a></li>
        <li><a href="nucleos.html">Núcleos</a></li>
         <li><a href="aliados.html">Aliados</a></li>
          <li><a href="gestao.html">Diretoria</a></li>
      </ul>
    </li>
    <li><a href="noticias.html">Notícias</a></li>
    <li><a href="#">Interativo</a>
      <ul id="submenu">
        <li><a href="musicas.html">Músicas</a></li>
        <li><a href="fotos.html">Fotos</a></li>
        <li><a href="videos.html">Vídeos</a></li>
      </ul>
    </li>
    <li><a href="loja.html">Loja</a></li>
    <li><a href="contato.html">Contato</a></li>
  </ul>
</nav>
  
  
</body>

html css

2 answers

1


You can do it a few ways, here are two:

1.

body {
    text-align: center;
}
nav.dropdownmenu {
    display: inline-block;
}

2.

nav.dropdownmenu {
    width: 1200px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

EDIT

If you want to revert the order from the menu to the logical form, change the float from right for left in the following class.

.dropdownmenu li {
    float: left;
}

  • @Leocaracciolo is like his example. Nothing has changed order.

  • @Leocaracciolo Yes, his example is in logical form, but in his example it is reversed. He did not ask to reverse.

  • @Leocaracciolo Put an Edit in case he wants to reverse.

  • 1

    @Is Leocaracciolo okay, right? That would be the sensible way to do it, but the float: right; has this habit of reversing everything. The problem is that I can’t assume that he didn’t do it on purpose without him having said anything about it.

  • Oops, I was able to center it, but not remove the spaces between the edges of the page It was with a margin far from the top, I used a margin-top -3px; solved now missing the two sides rsrs I guess I could leave the beginning more to the right side of the site and leave the wider posts between the beginning and the contact.

  • @Lucianobarbosa See if one: body { margin: 0; }, doesn’t solve your problem.

  • Yes, you did, Johnny.

Show 2 more comments

0

CSS

.dropdownmenu {
    margin: 0 auto; 
    text-align: center;
}

.dropdownmenu ul ul {
    display: none;
}

.dropdownmenu ul li:hover > ul {
    display: block;
}

.dropdownmenu ul {
    list-style: none;
    background: gray;
    margin: 0; 
    padding: 0; 
    display: inline-block;
    vertical-align: top; 
}

.dropdownmenu ul li {
    float: left;
    width: 200px;
    margin: 0;
    padding: 0;
}


.dropdownmenu ul li a {
    display: block; 
    padding: 10px 15px;
    background: #30A6E6;
    color: #ffffff;
    text-decoration: none;
    font: bold 12px/20px sans-serif;
    padding: 10px 25px;
    text-align: center;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}  

.dropdownmenu ul li ul li a:hover {
    color: #ffffff;
    background: #000000;
}    

.dropdownmenu ul li a:hover {
    color: #ffffff;
    background: #000000;
}  

.dropdownmenu ul ul {
    border-radius: 0px;
    padding: 0;
    position: absolute;
}

.dropdownmenu ul ul li {
    float: none; 
    position: relative;
}

.dropdownmenu ul li ul li a {
    color: #ffffff;
    background: #30A6E6;
}

.dropdownmenu ul li ul li a:hover {
    color: #ffffff;
}

.dropdownmenu ul ul ul {
    position: absolute;
    top:0;
}

To put the menu in reverse order, change the float left for right in the following class.

.dropdownmenu ul li {
    float: right;
    width: 200px;
    margin: 0;
    padding: 0;
}
  • 1

    Put some explanation in the answer, please.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.