Skip to main content
se añadieron 98 caracteres en el cuerpo; etiquetas editadas
Origen Enlace
Rodrigo
  • 6.2k
  • 6
  • 16
  • 37

Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se depslieguendesplieguen por encima del título.

Código HTML :

<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>;

Código CSS :

.container-div {
     width: 40%;
     height: 700px;
     display: flex;
     justify-content: space-between;
     border: 2px solid #fd8c8c;
}
 .container-div--flex-end {
     align-self: flex-end;
     border: 2px solid green;
}
 .c-ul {
     width: 220px;
     margin: 10px auto;
     padding: 0;
     list-style: none;
     font-size: 18px;
     text-align: center;
}
 .c-ul__title {
     list-style: none;
}
 .c-ul__title:hover .c-ul--list {
     max-height: 1000px;
     transition: 0.3s all ease-in;
}
 .c-ul__a {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list {
     width: 220px;
     max-height: 0;
     margin: 0;
     padding: 0;
     list-style: none;
     overflow: hidden;
     transition: 0.3s all ease-in;
}
 .c-ul--list-overflow {
     height: 200px;
     overflow: auto;
}
 .c-ul--list__item {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list__item:hover {
     background: #666;
     color: #fff;
}
 
<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>
.container-div {
  width: 40%;
  height: 700px;
  display: flex;
  justify-content: space-between;
  border: 2px solid rgb(253, 140, 140);
  &--flex-end {
    align-self: flex-end;
    border: 2px solid green;
  }
}

.c-ul {
  width: 220px;
  margin: 10px auto;
  padding: 0;
  list-style: none;
  font-size: 18px;
  text-align: center;

  &__title {
    list-style: none;

    &:hover .c-ul--list {
      max-height: 1000px;
      transition: 0.3s all ease-in;
    }
  }
  &__a {
    display: block;
    padding: 10px 10px 10px 20px;
    background: #333;
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;
  }
}

.c-ul--list {
  width: 220px;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  transition: 0.3s all ease-in;
  &-overflow {
    height: 200px;
    overflow: auto;
  }
  &__item {
    display: block;
    padding: 10px 10px 10px 20px;
    background: rgb(51, 51, 51);
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;

    &:hover {
      background: #666;
      color: #fff;
    }
  }
}
 

Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se depslieguen por encima del título.

Código HTML :

<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>;

Código CSS :

.container-div {
  width: 40%;
  height: 700px;
  display: flex;
  justify-content: space-between;
  border: 2px solid rgb(253, 140, 140);
  &--flex-end {
    align-self: flex-end;
    border: 2px solid green;
  }
}

.c-ul {
  width: 220px;
  margin: 10px auto;
  padding: 0;
  list-style: none;
  font-size: 18px;
  text-align: center;

  &__title {
    list-style: none;

    &:hover .c-ul--list {
      max-height: 1000px;
      transition: 0.3s all ease-in;
    }
  }
  &__a {
    display: block;
    padding: 10px 10px 10px 20px;
    background: #333;
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;
  }
}

.c-ul--list {
  width: 220px;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  transition: 0.3s all ease-in;
  &-overflow {
    height: 200px;
    overflow: auto;
  }
  &__item {
    display: block;
    padding: 10px 10px 10px 20px;
    background: rgb(51, 51, 51);
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;

    &:hover {
      background: #666;
      color: #fff;
    }
  }
}

Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se desplieguen por encima del título.

.container-div {
     width: 40%;
     height: 700px;
     display: flex;
     justify-content: space-between;
     border: 2px solid #fd8c8c;
}
 .container-div--flex-end {
     align-self: flex-end;
     border: 2px solid green;
}
 .c-ul {
     width: 220px;
     margin: 10px auto;
     padding: 0;
     list-style: none;
     font-size: 18px;
     text-align: center;
}
 .c-ul__title {
     list-style: none;
}
 .c-ul__title:hover .c-ul--list {
     max-height: 1000px;
     transition: 0.3s all ease-in;
}
 .c-ul__a {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list {
     width: 220px;
     max-height: 0;
     margin: 0;
     padding: 0;
     list-style: none;
     overflow: hidden;
     transition: 0.3s all ease-in;
}
 .c-ul--list-overflow {
     height: 200px;
     overflow: auto;
}
 .c-ul--list__item {
     display: block;
     padding: 10px 10px 10px 20px;
     background: #333;
     color: #eee;
     border-bottom: 1px solid #000;
     border-top: 1px solid #666;
     text-decoration: none;
     box-sizing: border-box;
}
 .c-ul--list__item:hover {
     background: #666;
     color: #fff;
}
 
<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>
 

Añadidos código HTML y CSS
Origen Enlace

Código HTML :

<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>;

Código CSS :

.container-div {
  width: 40%;
  height: 700px;
  display: flex;
  justify-content: space-between;
  border: 2px solid rgb(253, 140, 140);
  &--flex-end {
    align-self: flex-end;
    border: 2px solid green;
  }
}

.c-ul {
  width: 220px;
  margin: 10px auto;
  padding: 0;
  list-style: none;
  font-size: 18px;
  text-align: center;

  &__title {
    list-style: none;

    &:hover .c-ul--list {
      max-height: 1000px;
      transition: 0.3s all ease-in;
    }
  }
  &__a {
    display: block;
    padding: 10px 10px 10px 20px;
    background: #333;
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;
  }
}

.c-ul--list {
  width: 220px;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  transition: 0.3s all ease-in;
  &-overflow {
    height: 200px;
    overflow: auto;
  }
  &__item {
    display: block;
    padding: 10px 10px 10px 20px;
    background: rgb(51, 51, 51);
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;

    &:hover {
      background: #666;
      color: #fff;
    }
  }
}

Código HTML :

<div className="container-div">
  <div className="container-div--flex-end">
    <ul className="c-ul">
      <li className="c-ul__title">
        <a className="c-ul__a" href="#">
          Title
        </a>

        <ul className="c-ul--list">
          <div className="c-ul--list-overflow">
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 1
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 2
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 3
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL12">
                Item 4
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 5
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 6
              </a>
            </li>
            <li>
              <a className="c-ul--list__item" href="URL11">
                Item 7
              </a>
            </li>
          </div>
        </ul>
      </li>
    </ul>
  </div>
</div>;

Código CSS :

.container-div {
  width: 40%;
  height: 700px;
  display: flex;
  justify-content: space-between;
  border: 2px solid rgb(253, 140, 140);
  &--flex-end {
    align-self: flex-end;
    border: 2px solid green;
  }
}

.c-ul {
  width: 220px;
  margin: 10px auto;
  padding: 0;
  list-style: none;
  font-size: 18px;
  text-align: center;

  &__title {
    list-style: none;

    &:hover .c-ul--list {
      max-height: 1000px;
      transition: 0.3s all ease-in;
    }
  }
  &__a {
    display: block;
    padding: 10px 10px 10px 20px;
    background: #333;
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;
  }
}

.c-ul--list {
  width: 220px;
  max-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  transition: 0.3s all ease-in;
  &-overflow {
    height: 200px;
    overflow: auto;
  }
  &__item {
    display: block;
    padding: 10px 10px 10px 20px;
    background: rgb(51, 51, 51);
    color: #eee;
    border-bottom: 1px solid #000;
    border-top: 1px solid #666;
    text-decoration: none;
    box-sizing: border-box;

    &:hover {
      background: #666;
      color: #fff;
    }
  }
}
Origen Enlace

¿Cómo puedo hacer un menú desplegable con hover que vaya hacia arriba?

Hola muy buenas a todos.

Por más que le doy vueltas no consigo hacer un menú desplegable en el que las opciones se depslieguen por encima del título.

Digamos que tengo una lista de frutas. Pone frutas, y al pasar el ratón por encima, se despliegan las frutas que tengo, todo esto hecho con hover. Además, hay un alto definido en píxeles, ya que hay más de 12 frutas y quiero poder hacer scroll. Bueno pues mi duda es cómo podría hacer que se desplegasen las frutas hacia arriba, quedando el título en el mismo sitio. Lo que ocurre ahora mismo es que las frutas van para abajo y el título sube.

Estoy haciéndolo todo sin JS, solamente html y css.

Muchas gracias por vuestro tiempo, ¡Saludos!

PD: lo de frutas es un ejemplo.