Search code examples
htmlcssnavbardropdownsubmenu

How can I add a drop-right menu inside the dropdown menu?

Hi I have a page with a Dropdown navbar, and when you hover on the li inside the dropdown show another dropdown but to the right, how can I do it? thanks

I took the code from w3schools

My code:

ul {            /* MENU PARTE PRINCIPAL */
    list-style-type: none;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2d2d2d;
}

li {            /* ELEMENTOS DEL MENU */
    float: left;
}

li a, .curso {  /* CLASE CURSO, ELEMENTOS DEL MENU (HIPERVINCULOS) */
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .desplegable:hover .curso { /* CAMBIAR COLOR AL HACER HOVER SOBRE LI */
    background-color: #c40105;
}

li.desplegable {    /* MOSTRAR ELEMENTOS DEL MENU DE FORMA INLINE ES DECIR EN UNA LINEA */
    display: inline-block;
}

.grupo-desplegable {    /* PROPIEDADES DEL MENU QUE SE ABRE */
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.grupo-desplegable a { /* PORPIEDADES DEL MENU QUE SE ABRE SOBRE HIPERVINCULO */
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.grupo-desplegable a:hover {background-color: #f1f1f1} /* CAMBIO DE COLOR AL HACER HOVER SOBRE EL HIPERVINCULO (li) DEL MENU DESPLEGABLE */

.desplegable:hover .grupo-desplegable { 
    display: block;
}

HTML:

<ul>
    <li class="desplegable">
        <a href="#" class="curso">1º ESO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
        </div>
    </li>
    <li class="desplegable">
        <a href="#" class="curso">2º ESO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
        </div>
    </li>
    <li class="desplegable">
        <a href="#" class="curso">3º ESO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
        </div>
    </li>
    <li class="desplegable">
        <a href="#" class="curso">4º ESO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
        </div>
    </li>
    <li class="desplegable">
        <a href="#" class="curso">1º BACHILLERATO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
            <a href="#">Grupo E</a>
            <a href="#">Grupo F</a>
            <a href="#">Grupo G</a>                         
        </div>
    </li>
    <li class="desplegable">
        <a href="#" class="curso">2º BACHILLERATO</a>
        <div class="grupo-desplegable">
            <a href="#">Grupo A</a>
            <a href="#">Grupo B</a>
            <a href="#">Grupo C</a>
            <a href="#">Grupo D</a>
            <a href="#">Grupo E</a>
            <a href="#">Grupo F</a>
            <a href="#">Grupo G</a> 
        </div>
    </li>
</ul>

The hierarchy should be like

  • 1º ESO
    • Grupo A
      • Subitem A
      • Subitem A
      • Subitem A
Solution

  • You do that in the very same way as you did with your first dropdown. This time it just have to be places to the top left, relative to the li:

    /* Generel */
ul,
li {
  list-style-type: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  vertical-align: top;
}

ul li a {
  display: inline-block;
}

ul.main {
  background-color: #2d2d2d;
  overflow: hidden;
}

ul.main > li.desplegable > a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.main > li.desplegable:hover {
    background-color: #c40105;
}

/* Grupo Desplegable */
ul.main > li.desplegable > ul.grupo-desplegable,
ul.grupo-desplegable > li > ul.sub-grupo-desplegable {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

ul.main > li.desplegable:hover > ul.grupo-desplegable { 
  display: block;
}

ul.main > li.desplegable > ul.grupo-desplegable > li,
ul.grupo-desplegable > li > ul.sub-grupo-desplegable > li {
  display: block;
  position: relative;
}

ul.main > li.desplegable > ul.grupo-desplegable > li:hover,
ul.grupo-desplegable > li > ul.sub-grupo-desplegable > li a:hover {
  background-color: #f1f1f1;
}

ul.main > li.desplegable > ul.grupo-desplegable > li > a,
ul.grupo-desplegable > li > ul.sub-grupo-desplegable > li > a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Sub Grupo Desplegable */
ul.grupo-desplegable > li > ul.sub-grupo-desplegable {
  top: 0;
  left: 100%;
  z-index: -1;
}

/* Sub Grupo Desplegable */
ul.grupo-desplegable > li:hover > ul.sub-grupo-desplegable {
  display: block;
}
    <ul class="main">
  <li class="desplegable">
    <a href="#" class="curso">1º ESO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li>
        <a href="">Grupo D</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="desplegable">
    <a href="#" class="curso">2º ESO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li>
        <a href="">Grupo D</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="desplegable">
    <a href="#" class="curso">3º ESO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li>
        <a href="">Grupo D</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="desplegable">
    <a href="#" class="curso">4º ESO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li>
        <a href="">Grupo D</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="desplegable">
    <a href="#" class="curso">1º BACHILLERATO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li><a href="">Grupo D</a></li>
      <li><a href="">Grupo E</a></li>
      <li><a href="">Grupo F</a></li>
      <li>
        <a href="">Grupo G</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="desplegable">
    <a href="#" class="curso">2º ESO</a>
    <ul class="grupo-desplegable">
      <li><a href="">Grupo A</a></li>
      <li><a href="">Grupo B</a></li>
      <li><a href="">Grupo C</a></li>
      <li><a href="">Grupo D</a></li>
      <li><a href="">Grupo E</a></li>
      <li><a href="">Grupo F</a></li>
      <li>
        <a href="">Grupo G</a>
        <ul class="sub-grupo-desplegable">
          <li><a href="">Subitem A</a></li>
          <li><a href="">Subitem B</a></li>
          <li><a href="">Subitem C</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

    I have modified your code, so all the dropdown menus and sub-dropdown menus are ul's as well.

    Hover the last item in each dropdown menu to open the sub dropdown menu.