1

Este es el dropdown-button "Multimedia" y su CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 15.8%;
    background-color: #e0e0e0;
    position: fixed;
    height: 600px;
    overflow: auto;
	right:1129px;
	top:47px;
	border:1px solid #939496;
	left:0px;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
	font-size:30px;
	
}


button:hover{
 background-color: #4dd6e2;
    color: white;
}


li a.active {
    background-color: #309ba5;
    color: white;
}

li a:hover:not(.active) {
    background-color: #4dd6e2;
    color: white;
}

.dropbtn {
    background-color: #e0e0e0;
    color: black;
    padding: 16px;
    font-size: 30px;
    border: none;
    cursor: pointer;
	width:22px;
	height:50px;
	font-family:Times New Roman;
	text-align:middle;
	
}

.dropdown {
    position: relative;
    display: inline-block;
	top:-88px;
	right:572px;
	
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #4dd6e2;
}
<div class="dropdown">
  <button class="dropbtn">Multimedia</button>
  <div class="dropdown-content">
    <a href="mp4.html">MP4</a>
    <a href="png.html">PNG</a>
    <a href="gif.html">GIF</a>
  </div>
</div>

Y este el es menú:

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a href="aboutme.html">About</a></li>
  <li><a href="games.html">Games</a></li>
  <li><a href="">Multimedia</a></li> <!--Aqui va el dropdown-->
</ul>

Quiero meter el dropdown-button en el <li>, pero si lo meto, no funciona. Alguien sabe cómo solucionar esto?

6
  • el problema está en el CSS ya que estás poniendo unos valores en .dropdown que sacan el botón de su sitio y no se ve. Prueba a modificar o eliminar el top y el right de ese div
    – user7176
    el 12 dic. 2016 a las 10:58
  • <ul> <li><a href="index.html">Home</a></li> <li><a href="contact.html">Contact</a></li> <li><a class="active" href="aboutme.html">About</a></li> <li><a href="games.html">Games</a></li> <li> <div class="dropdown"> <button class="dropbtn">Multimedia</button> <div class="dropdown-content"> <a href="mp4.html">MP4</a> <a href="png.html">PNG</a> <a href="gif.html">GIF</a> </div> </div> </li> </ul> Tengo esto, pero no funciona.
    – JuanVan12
    el 12 dic. 2016 a las 11:06
  • He quitado el top y el right del div
    – JuanVan12
    el 12 dic. 2016 a las 11:08
  • 1
    mira esto: jsfiddle.net/2j0vcpsk/1 he cambiado algun ancho para que se vea mejor pero el problema es que no se veía el dropdown
    – user7176
    el 12 dic. 2016 a las 11:10
  • Realmente tu dropdown-button por sí solo tampoco se muestra. el 12 dic. 2016 a las 11:10

1 respuesta 1

2

El único problema que veo es que le estás dando una posición al menú que hace que se salga de la pantalla y no se vea, porque por lo demás, parece funcionar correctamente. Los estilos a los que me refiero son estos:

.dropdown {
    position: relative;
    display: inline-block;
    top:-88px;   /* <---------------- este valor   */
    right:572px; /* <---------------- y este valor */
}

De hecho, esos valores son increíblemente específicos, no me extrañaría que los tuvieses ahí por algún motivo (aunque no parecen una solución ideal), pero no tienen sentido dentro del ejemplo que pones en la pregunta.

Así, si pones tu mismo código quitando ese posicionamiento de los estilos, verás como el dropdown ya está visible y funciona (aunque parece que le falta algo de estilo a las opciones):

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15.8%;
  background-color: #e0e0e0;
  position: fixed;
  height: 600px;
  overflow: auto;
  right:1129px;
  top:47px;
  border:1px solid #939496;
  left:0px;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  font-size:30px;

}


button:hover{
  background-color: #4dd6e2;
  color: white;
}


li a.active {
  background-color: #309ba5;
  color: white;
}

li a:hover:not(.active) {
  background-color: #4dd6e2;
  color: white;
}

.dropbtn {
  background-color: #e0e0e0;
  color: black;
  padding: 16px;
  font-size: 30px;
  border: none;
  cursor: pointer;
  width:22px;
  height:50px;
  font-family:Times New Roman;
  text-align:middle;

}

.dropdown {
  position: relative;
  display: inline-block;
  /*top:-88px;
  right:572px;*/
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #4dd6e2;
}
<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="contact.html">Contact</a></li>
  <li><a class="active" href="aboutme.html">About</a></li>
  <li><a href="games.html">Games</a></li>
  <li>
    <div class="dropdown">
      <button class="dropbtn">Multimedia</button>
      <div class="dropdown-content">
        <a href="mp4.html">MP4</a>
        <a href="png.html">PNG</a>
        <a href="gif.html">GIF</a>
      </div>
    </div>
  </li>
</ul>

Para que el ancho se vea mejor, podrías quitarle el width:22px al dropbtn y hacer que la lista tenga un overflow-x:hidden para que no aparezcan las barras de scroll.

1
  • Eso es, ademas el botón .dropbtn tiene un ancho de 22 píxeles que hace que no se despliege correctamente el menú, eliminando ese valor mejora bastante
    – user7176
    el 12 dic. 2016 a las 14:42

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.