How to center Menu in css?

Navigation
2

I would like to know how to centralize 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>
    
asked by anonymous 07.05.2017 / 19:00

2 answers

1

You can do it in some ways, follow 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 menu order to the logical form, switch the float from right to left in the following class. 

.dropdownmenu li {
    float: left;
}
    
08.05.2017 / 14:43
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 place the menu in reverse order, change the float from left to right in the following class. 

.dropdownmenu ul li {
    float: right;
    width: 200px;
    margin: 0;
    padding: 0;
}
    
08.05.2017 / 15:25
HTTP / 1.1 idHTTP error 401 Unauthorized Node js, promises, callback