0

Tengo el siguiente de código el cual saque de un foro que es de un menú desplegable, pero lo quiero tener centrado, supuestamente en el foro te da el código ya centrado pero no, y he estado investigando sobre como centrarlo en distintas páginas pero sin suerte no he encontrado nada y en realidad no se cómo hacerlo.

Si me pueden ayudar, muchas gracias, lo necesito. Aquí el código:

Las partes que se agregaron supuestamente al código para centrarlo están en forma de comentarios para poder identificarlos

<html>
<head>
    <title>Menu Desplegable</title>
    <style type="text/css">

        * {
            margin:0px;
            padding:0px;
        }

        #header {
            margin:auto;
            width:500px;
            font-family:Arial, Helvetica, sans-serif;
        }

        ul, ol {
            list-style:none;
        }

        .nav {
            width:500px; /*Le establecemos un ancho*/
            margin:0 auto; /*Centramos automaticamente*/
        }

        .nav > li {
            float:left;
        }

        .nav li a {
            background-color:#000;
            color:#fff;
            text-decoration:none;
            padding:10px 12px;
            display:block;
        }

        .nav li a:hover {
            background-color:#434343;
        }

        .nav li ul {
            display:none;
            position:absolute;
            min-width:140px;
        }

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

        .nav li ul li {
            position:relative;
        }

        .nav li ul li ul {
            right:-140px;
            top:0px;
        }

    </style>
</head>
<body>
    <div id="header">
        <nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
            <ul class="nav">
                <li><a href="">Inicio</a></li>
                <li><a href="">Servicios</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a>
                            <ul>
                                <li><a href="">Submenu1</a></li>
                                <li><a href="">Submenu2</a></li>
                                <li><a href="">Submenu3</a></li>
                                <li><a href="">Submenu4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">Acerca de</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a></li>
                    </ul>
                </li>
                <li><a href="">Contacto</a></li>
            </ul>
        </nav><!-- Aqui estamos cerrando la nueva etiqueta nav -->
    </div>
</body>

3 respuestas 3

0

Podrías probar con

nav {
display:flex;
}

y en la clase .nav quitas el width:500px;

2
  • No me funcionó, tengo un contador aparte y eso lo centro en vez de el menú el 27 mar. 2020 a las 20:55
  • ¿Podrías poner como tienes actualmente tu header a ver si otros pueden ayudarte? el 27 mar. 2020 a las 21:16
0

Puedes probar a centrarlo entre las etiquetas situadas en el body de tu menú, al inicio de las etiquetas del menú deberías colocar estas etiquetas como envolviendo tu menú.

    <html>
    <head>

    codigo css

    </head>
    <body>
<div id="header">
        <center>

                <nav> <!-- Aqui estamos iniciando la nueva etiqueta nav -->
            <ul class="nav">
                <li><a href="">Inicio</a></li>
                <li><a href="">Servicios</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a>
                            <ul>
                                <li><a href="">Submenu1</a></li>
                                <li><a href="">Submenu2</a></li>
                                <li><a href="">Submenu3</a></li>
                                <li><a href="">Submenu4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="">Acerca de</a>
                    <ul>
                        <li><a href="">Submenu1</a></li>
                        <li><a href="">Submenu2</a></li>
                        <li><a href="">Submenu3</a></li>
                        <li><a href="">Submenu4</a></li>
                    </ul>
                </li>
                <li><a href="">Contacto</a></li>
            </ul>
        </nav>    
     </center>

   </div>

    </body>
    </html>

Recuerda que es importante cerrar las etiquetas abiertas.

1
0
    .nav {
        width:500px; /*Le establecemos un ancho*/
        margin:0 auto; /*Centramos automaticamente*/
        text-align: center;
        background: red;
    }

    .nav > li {
        display: inline-block;
    }
1
  • 1
    da un breve explicacion de tu respuesta. el 28 mar. 2020 a las 22:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.