Вопросы Теги

Ширина пунктов li в подменю не соответствует ширине вашего отца

У меня есть упражнение меню с подуровнем, в котором у меня есть следующая проблема:

  • Ширина подменю, которое зависит от второго элемента или элемента в главном меню, не регулируется, если количество Пункты меню увеличиваются или уменьшаются

Я пытался настроить его с помощью процентов, но, очевидно, у меня есть следующие недостатки:

  • Если количество элементов увеличивается, то элемент подменю слишком велик
  • Если размер экрана увеличивается или уменьшается , то ширина родительского элемента li перестает соответствовать элементу подменю.

Я оставляю пример кода, который я пробовал, где вы можете даже заметить использование процента, который я упомянул. 

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejercicio</title>
      <style>
        nav > ul {
          display: flex;
          padding: 0;
        }
        ul > li {
          flex: auto;
          list-style: none;
          background: tomato;
          text-align: center;
        }
        li > ul {
          display: none;
        }
        nav ul > li:nth-child(n+1):hover .submenu{
          display: block;
          cursor: pointer;
          position: fixed;
          padding: 0px;
          min-width: 30%;
        }
      </style>
    </head>
    <body>
    <nav>
      <ul>
        <li>Elemento 1</li>
        <li>
          Elemento 2
          <ul class="submenu">
            <li>elementos 1</li>
          </ul>
        </li>
        <li>Elemento 3</li>
      </ul>
    </nav>
    </body>
    </html>
0
задан 01.12.2019, 02:25
1 ответ

Проблемы

у Твоего c¦digo есть фундаментальная ошибка и дело в том, что ты использовал свойство fixed вместо свойства absolute.
raz¦n из этого состоит в том, что свойство fixed бросает якорь в окно и не в элементы añadidos.

Soluci¦n 

nav > ul {
display: flex;
padding: 0;
}
ul > li {
    flex: auto;
    /*
        Añadimos el position:relative para contener el elemento absolute
    */
    position:relative
    list-style: none;
    background: tomato;
    text-align: center;
}
li > ul {
    display: none;
}
nav ul > li:nth-child(n+1):hover .submenu{
    display: block;
    cursor: pointer;
    /*
        Cambiamos el fixed por absolute
    */
    position: absolute;
    /*
        Añadimos el width:100% esto cojera todo el ancho del padre que lo contiene
        para contener un elemento absolute se requiere que el padre tenga un position:relative
    */
    width:100%
    padding: 0px;
    min-width: 30%;
}
1
ответ дан 01.12.2019, 10:30
  • 1
    Я тебе благодарен очень много, остроконечный и изученный за +1 – Aprendiz 01.12.2019, 04:38