1

Soy principiante y estoy tratando de centrar este menú desplegable y no lo consigo. Favor de guiarme.

body {
     text-align:center;
     margin:0 auto;
     background-color:#FFFF00;
     }

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

h1 {
   text-align:center;
   margin:0 auto;
   font-family:arial,helveltica,sans-serif;
   font-size: 45px;
   padding:20px;
   }

#header {
        margin:0px auto;
        text-align:center;
        width:100%;
        font-family:arial,helveltica,sans-serif;
        font-size: 35px;
        position: absolute;
        }

ul,ol   {
        float: left;
        list-style-type: none;
        padding: 0px;
        }

.nav li a {
          margin: 0 auto;
          background-color: #e17b0f;/*#000;*/
          color:#fff;
          Text-decoration:none;
          padding:10px 15px;
          display:block;
          text-align:center;
          }

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

.nav > li {
          float:left;
          }

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

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

.nav li ul li {
              position:relative;
              }

.nav li ul li ul {
                 right:-140px;
                 top:0px;
                 }
<!DOCTYPE html>
<html>
	<head>
		<title>PRUEBA</title>
		<link rel="stylesheet" href="es.css">
	</head>

<body>
	<div id="header">
		<h1>MENU DESP DE PRUEBA</h1>
		<ul class="nav">
				<li><a href="">AAAA</a>
					<ul>
						<li><a href="">TTT</a>
							<ul>  
								<li><a href="">AA50</a></li>
								<li><a href="">BB50</a></li>  
								<li><a href="">7EE0</a></li>
							</ul>  
						</li>
						<li><a href="">QQQ</a>
							<ul>  
								<li><a href="">AA50</a></li>
								<li><a href="">BB50</a></li>  
								<li><a href="">7EE0</a></li>  
								<li><a href="">5SW0</a></li>  
							</ul>  
						</li>
						<li><a href="">SSSS</a>
							<ul>  
								<li><a href="">AA50</a></li>
								<li><a href="">BB50</a></li>  
								<li><a href="">7EE0</a></li>  
								<li><a href="">5SW0</a></li>  
							</ul>
						</li>
					</ul>
				</li>
				<li><a href="">BBBB</a>
					<ul>
						<li><a href="">ZZZZ</a></li>
						<li><a href="">PPPP</a></li>
						<li><a href="">RRRR</a>
							<ul>
								<li><a href="">HHH1</a></li>
								<li><a href="">HHH2</a></li>
							</ul>
						</li>
						<li><a href="">YYYY</a></li>
						<li><a href="">FFFF</a></li>
					</ul>
				</li>
				<li><a href="">CCCC</a>
					<ul>
						<li><a href="">JJJJ</a>
							<ul>  
								<li><a href="">AA50</a></li>
								<li><a href="">BB50</a></li>  
								<li><a href="">7EE0</a></li>  
								<li><a href="">5SW0</a></li>
							</ul>  
						</li>
						<li><a href="">LLLL</a>
							<ul>  
								<li><a href="">AA50</a></li>
								<li><a href="">BB50</a></li>  
								<li><a href="">7EE0</a></li>  
								<li><a href="">5SW0</a></li>  
							</ul>  
						</li>
						<li><a href="">OPOP</a></li>
					</ul>
				</li>
		</ul>
	</div>
</body>
</html>

1 respuesta 1

0

En principio solo bastaría con añadir un display: inline-block; a la clase nav para que haga efecto el text-align : center. Además modificar el min-widh a 123px en el ul

body {
 text-align:center;
 margin:0 auto;
 background-color:#FFFF00;
}

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

h1 {
 text-align:center;
 margin:0 auto;
 font-family:arial,helveltica,sans-serif;
 font-size: 45px;
 padding:20px;
}

#header {
  margin:0px auto;
  text-align:center;
  width:100%;
  font-family:arial,helveltica,sans-serif;
  font-size: 35px;
  position: absolute;
}
/*Nueva Regla*/
.nav{
  display: inline-block;
}
ul,ol   {
  list-style-type: none;
  padding: 0px;
}

.nav li a {
  margin: 0 auto;
  background-color: #e17b0f;/*#000;*/
  color:#fff;
  Text-decoration:none;
  padding:10px 15px;
  display:block;
  text-align:center;
}

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

.nav > li {
  float:left;
}

.nav li ul {
  display:none;
  position:absolute;
  min-width:123px;
  font-size: 25px;
}

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

.nav li ul li {
  position:relative;
}

.nav li ul li ul {
 right:-140px;
 top:0px;
}
<div id="header">
    <h1>MENU DESP DE PRUEBA</h1>
    <ul class="nav">
        <li><a href="">AAAA</a>
            <ul>
                <li><a href="">TTT</a>
                    <ul>  
                        <li><a href="">AA50</a></li>
                        <li><a href="">BB50</a></li>  
                        <li><a href="">7EE0</a></li>
                    </ul>  
                </li>
                <li><a href="">QQQ</a>
                    <ul>  
                        <li><a href="">AA50</a></li>
                        <li><a href="">BB50</a></li>  
                        <li><a href="">7EE0</a></li>  
                        <li><a href="">5SW0</a></li>  
                    </ul>  
                </li>
                <li><a href="">SSSS</a>
                    <ul>  
                        <li><a href="">AA50</a></li>
                        <li><a href="">BB50</a></li>  
                        <li><a href="">7EE0</a></li>  
                        <li><a href="">5SW0</a></li>  
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">BBBB</a>
            <ul>
                <li><a href="">ZZZZ</a></li>
                <li><a href="">PPPP</a></li>
                <li><a href="">RRRR</a>
                    <ul>
                        <li><a href="">HHH1</a></li>
                        <li><a href="">HHH2</a></li>
                    </ul>
                </li>
                <li><a href="">YYYY</a></li>
                <li><a href="">FFFF</a></li>
            </ul>
        </li>
        <li><a href="">CCCC</a>
            <ul>
                <li><a href="">JJJJ</a>
                    <ul>  
                        <li><a href="">AA50</a></li>
                        <li><a href="">BB50</a></li>  
                        <li><a href="">7EE0</a></li>  
                        <li><a href="">5SW0</a></li>
                    </ul>  
                </li>
                <li><a href="">LLLL</a>
                    <ul>  
                        <li><a href="">AA50</a></li>
                        <li><a href="">BB50</a></li>  
                        <li><a href="">7EE0</a></li>  
                        <li><a href="">5SW0</a></li>  
                    </ul>  
                </li>
                <li><a href="">OPOP</a></li>
            </ul>
        </li>
    </ul>
</div>

2

Tu Respuesta

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

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