html - 如何在下拉菜单中添加右下拉菜单？

Question

您好，我有一个带有下拉导航栏的页面，当您将鼠标悬停在下拉菜单内的 li 上时，会显示另一个下拉菜单但在右侧，我该怎么做？谢谢

我从w3schools拿了代码

我的代码:

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>

层次结构应该是这样的

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

Answer 1

您可以按照与第一个下拉菜单相同的方式执行此操作。这次它必须位于左上角，相对于 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>

我已经修改了你的代码，所以所有的下拉菜单和子下拉菜单也是ul的。

将鼠标悬停在每个下拉菜单的最后一项以打开子下拉菜单。