una - Cuestión de alineación de la lista desplegable(HTML/CSS)
menu desplegable vertical html (3)
He hecho una pregunta como esta antes, pero estoy usando un código diferente a la última vez.
Estoy tratando de crear un menú desplegable. Hay ciertos elementos en esa lista principal que tienen una lista desplegable (Noticias y Equipo). Por alguna razón, se mueven hacia la derecha. Lo que me gustaría es que los elementos en el menú desplegable estén alineados con su padre.
Cualquier ayuda sería apreciada.
Gracias
http://codepen.io/DocRow10/pen/hjIkq
<body>
<div id="container">
<div id="banner" class="clearfix">
<img id="crest" src="images/cecc-logo.png" />
<h1>Test Website</h1>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a>
<ul>
<li><a href="#">Social Events</a></li>
</ul>
</li>
<li><a href="#">Team</a>
<ul>
<li><a href="#">Players</a></li>
<li><a href="#">Fixtures/Results</a></li>
<li><a href="#">Statistics</a></li>
</ul>
</li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
body {
background-color: rgb(200, 220, 255);
/* #455868 */
}
#container {
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 100%;
text-align: center;
}
#crest {
height: 150px;
width: 180px;
display: inline-block;
}
#banner h1 {
display: inline-block;
}
/* Bat Colour rgb(38, 124, 196); */
@media only screen and (min-width : 480px) {
#banner h1 {
font-size: 30px;
display: inline-block;
}
}
@media only screen and (min-width : 768px) {
#banner h1 {
font-size: 36px;
display: inline-block;
}
}
@media only screen and (min-width : 980px) {
#banner h1 {
font-size: 47px;
display: inline-block;
}
}
nav {
height: 40px;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: rgb(238, 0, 0);
font-size: 13pt;
font-family: neris;
border-bottom: 2px solid #283744;
}
nav > ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav > ul > li {
display: inline;
float: left;
}
nav ul a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4;
}
nav a#pull {
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul ul li {
display: block;
}
main {
width: 90%;
height: 200px;
margin-right: auto;
margin-left: auto;
background-color: rgb(38, 124, 196);
}
footer {
width: 90%;
height: 50px;
margin-right: auto;
margin-left: auto;
background-color: rgb(0, 0, 0);
}
Algunos elementos en la página web tienen valores de padding estándar. Por ejemplo, todas las listas tienen padding-left . Si quiere cambiar esto intente esto:
Agregue esto en su código CSS:
ul {
padding: 0;
}
O puede agregar una id o una class específica para este menú y cambiar el relleno para ellos.
Solo tiene que agregar padding: 0 a su regla de nav ul ul así que aparece así:
nav ul ul {
display: none;
position: absolute;
padding: 0;
}
De forma predeterminada, los elementos ul tienen un margen izquierdo de 40 píxeles, es necesario eliminar ese margen para hacer que el segundo nivel se alinee con el primero.
Solo quiero darles las gracias por todas sus respuestas. No sé por qué me tomó tanto tiempo, pero finalmente lo descubrí.
En el codepen que mostraba, había una cosa importante que estaba dejando: el archivo CSS para el marco Mobile-Responsive conocido como Foundation. Ese archivo CSS tenía todas las etiquetas UL tienen un margen izquierdo de 1.25em. Es por eso que la etiqueta ul se movió hacia la derecha.
Para solucionar este problema, cambié lo siguiente:
nav ul ul {
display: none;
position: absolute;
padding: 0;
margin: 0;
}
Agregué una propiedad de margen y ahora todo está bien.
De nuevo, gracias a todos los que me ayudaron con esta respuesta y lo siento por perder su tiempo.
Les deseo a todos bien.