1

Tengo este código y noto que mi menú en la sección "artículos" no se pone bajo el banner sino que se va al lado, además, en la sección principal, al pasar el ratón sobre el menú desplegable, el texto bajo el menú se va al lado y yo lo quiero fijo. ¿Por qué sucede y cómo puedo solucionarlo?

Éste es mi código:

body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  position: relative;
  top: -75px;
  font-family: century;
  font-size: 20.05px;
}

ul,
il {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
  float: left;
  #nave li lu li {
    position: inline-block;
  }
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none;
}

#fb {
  position: relative;
  top: -180px;
  left: 1200px;
}

.nave li ul {
  display: none;
}

.nave li:hover>ul {
  display: block;
}
<a href="codigo 1,inicio.html">
  <img src="https://placehold.it/1366x200" height="200px" width="1366px" title="inicio" />
</a>
<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="https://placehold.it/70x70/008/" height="70px" width="70px" title="fb primate">
  </a>
</div>
<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="nosotros.html"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html"> ARTICULOS </a> </li>
        <li> <a href="publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
  at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
  quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
  at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
  quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
</p>
<div class="loren">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
    at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
    quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
  </p>
</div>

3
  • Solo veo el código css pero no has puesto bien el html, revisalo. el 7 jul. 2017 a las 22:48
  • ya lo hice, disculpa los inconvenientes
    – pedro
    el 7 jul. 2017 a las 22:51
  • Creo que una muy buena opción es usar flexbox, yo desde que lo conocí lo uso para todo. display:flex; y luego con flex-direction:column; los pones en columna y flex-direction:row; en fila. Mirate esta guia sino: css-tricks.com/snippets/css/a-guide-to-flexbox el 7 jul. 2017 a las 22:57

1 respuesta 1

0

El problema es que las opciones del menú están posicionadas de tal manera al abrirlas (p.e. el menú de "artículos") éstas empujan el contenido que viene después y ese es el problema que se ve en el ejemplo de la pregunta.

Una posible solución sería sacar los menús (o mejor dicho los submenús) fuera del flujo normal de la página, para que no empujen el resto de contenido una vez que se abran. Para ello debes hacer que las opciones del menú tengan un position: relative y luego los submenús tengan un position: absolute. Tan simple como esto:

.nave>li {
  float: left;
  position: relative;
}

.nave li ul {
  display: none;
  position: absolute;
}

Además, quizás te interesaría que el submenú ocupe todo el ancho del contenedor (con width: 100%), quedando así:

body {
  background-color: rgb(220, 220, 220);
}

* {
  padding: 0;
  margin: 0;
}

#header {
  margin: 0px;
  width: 1365px;
  position: relative;
  top: -75px;
  font-family: century;
  font-size: 20.05px;
}

ul,
il {
  list-style: none;
}

.nave li a {
  position: relative;
  bottom: 5px;
  background-color: rgb( 0, 0, 0);
  color: white;
  width: 100%;
  text-decoration: none;
  display: inline-block;
  padding: 10px 10px;
}

.nave>li {
  float: left;
  position: relative;
}

.nave li a:hover {
  background-color: rgb( 242, 179, 44);
}

p {
  background: white;
  width: 300px;
  margin: 50px;
  display: inline-block;
  padding: 20px;
  float: left;
  #nave li lu li {
    position: inline-block;
  }
}

.loren {
  position: relative;
  top: 227px;
  left: 850px;
  padding: 20px;
}

li ul li {
  display: block;
}

.header ul li a ul li {
  display: none;
}

#fb {
  position: relative;
  top: -180px;
  left: 1200px;
}

.nave li ul {
  display: none;
  position: absolute;
  width: 100%;
}

.nave li:hover>ul {
  display: block;
}
<a href="codigo 1,inicio.html">
  <img src="https://placehold.it/1366x200" height="200px" width="1366px" title="inicio" />
</a>
<div id="fb">
  <a href="https://www.facebook.com/Tr%C3%ADada-Primate-1006588336127088/?ref=aymt_homepage_panel">
    <img src="https://placehold.it/70x70/008/" height="70px" width="70px" title="fb primate">
  </a>
</div>
<div id="header">
  <ul class="nave">
    <li> <a href="codigo 1,inicio.html"> INICIO </a> </li>
    <li> <a href="nosotros.html"> NOSOTROS</a> </li>
    <li> <a href="new 1.html">CONTRA EDITORIAL PRIMATE </a>
      <ul>
        <li> <a href="articulos.html"> ARTICULOS </a> </li>
        <li> <a href="publicaciones.html">PUBLICACIONES </a> </li>
        <li> <a href="columnas.html">COLUMNAS </a></li>
      </ul>
    </li>
    <li> <a href="primatetv.html">  PRIMATE TV </a> </li>
    <li> <a href="radio primate.html"> RADIO PRIMATE </a> </li>
    <li> <a href="tienda.html"> TIENDA </a> </li>
    <li> <a href="donaciones.html">DONACIONES </a> </li>
    <li> <a href="contactanos.html">CONTACTANOS </a> </li>
  </ul>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
  at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
  quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
  at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
  quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
</p>
<div class="loren">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eros mattis, mollis nunc eu, tristique lacus. Fusce vitae placerat velit, quis euismod est. Maecenas porttitor magna risus, non iaculis lorem semper non. Etiam dui nunc, rhoncus eu condimentum
    at, rhoncus nec nibh. Phasellus nec erat ipsum. Donec vel purus tempus, euismod diam in, lacinia sapien. Phasellus vel dictum nunc, ac sagittis velit. Praesent eget nisl auctor, lacinia libero id, volutpat tellus. Ut et augue malesuada, pretium nulla
    quis, faucibus nulla. Cras laoreet massa vitae nisl tempor, in bibendum massa auctor. Morbi venenatis arcu diam, nec gravida velit vestibulum non. Nunc id lorem dui. Sed pharetra diam mattis nisl vulputate, ut consectetur lorem maximus.
  </p>
</div>

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.