Блог

Главная - Вопросы по программированию - Настроить ширину списка на содержащуюся ссылку, а не на содержащийся вложенный список

Настроить ширину списка на содержащуюся ссылку, а не на содержащийся вложенный список

#html #css

#HTML #css

Вопрос:

У меня есть горизонтальный flex список, каждый элемент содержит ссылку и другой вложенный список.

Я бы хотел, чтобы первое поколение элементов li было таким же широким, как слово в содержащейся ссылке, а вложенный список был настолько широким, насколько это необходимо, чтобы быть интерактивным и не переносить слова.

Попробовал вариант 1: я установил ширину первой li в 40 пикселей, а подширину ul в 200 пикселей -> вложенные ссылки больше не доступны для просмотра.

Попробовал вариант 2: я установил ширину вложенного ul в 10 пикселей и white-space: nowrap; , и position: relative; z-index: 5; для конечных ссылок -> вложенные ссылки доступны для просмотра … но, это лучшая практика?

 <ul id="menu-mobile-en" class="menu">
    <li id="menu-item-20858" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-20858 focus"><a href="#">SHOP</a><button aria-expanded="false" class="dropdown-toggle"><span class="screen-reader-text">Expand child menu</span></button>
        <ul class="sub-menu toggled-on">
            <li id="menu-item-9404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9404"><a href="https://staging.mysite.com/all/">All</a></li>
            <li id="menu-item-39924" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-39924"><a href="https://staging.mysite.com/eshop2/new/">New</a></li>
            <li id="menu-item-4352" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4352"><a href="https://staging.mysite.com/eshop2/boxers-for-men/">Boxers</a></li>
            <li id="menu-item-4357" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4357"><a href="https://staging.mysite.com/eshop2/briefs/">Briefs</a></li>
            <li id="menu-item-4358" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4358"><a href="https://staging.mysite.com/eshop2/tank-tops/">Tank Tops</a></li>
            <li id="menu-item-4355" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4355"><a href="https://staging.mysite.com/eshop2/t-shirts/">T-shirts</a></li>
            <li id="menu-item-4353" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4353"><a href="https://staging.mysite.com/eshop2/henleys/">Henleys</a></li>
            <li id="menu-item-4354" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4354"><a href="https://staging.mysite.com/eshop2/longjohns/">Longjohns</a></li>
            <li id="menu-item-4356" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4356 focus"><a href="https://staging.mysite.com/eshop2/accessories/">Accessories</a></li>
            <li id="menu-item-34091" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-34091"><a href="https://staging.mysite.com/eshop2/last-chance/">Last chance</a></li>
        </ul>
    </li>
</ul>

CSS:

 /* Inner toggled menu */
.handheld-navigation {
    color: black;
    position: fixed;
    width: 100%;
    top: 85px;
    bottom: 0;
    background-color: white;
    font-size: 15px;
    letter-spacing: 3px
}
.handheld-navigation ul.menu {
    display:flex;
    margin-left: 7px;
    margin-top: 0px;
}
.handheld-navigation ul.menu a {
    font-weight: 900;
    display: inline-block;
}
.handheld-navigation ul.menu li.menu-item a {
    padding: 8px 0;
}
.handheld-navigation ul.menu li.menu-item ul.sub-menu {
    display:flex;
    flex-direction: column;
    margin-left: 0;
}
.handheld-navigation ul.menu li.menu-item ul.sub-menu li a {
    font-weight: normal;
    color: black;
    text-transform: uppercase;
}

Комментарии:

1. Фрагмент был бы отличным

2. z-индекс работает. Это чистое решение?

Ответ №1:

Кажется ли это полезным?

Примечание: Запустите фрагмент и проверьте элементы.

 /* Inner toggled menu */

ul.menu {
  display: flex;
  margin-left: 7px;
  margin-top: 0px;
}

ul.menu a {
  font-weight: 900;
  display: inline-block;
}

ul.menu button {
  position: absolute;
  right: 10px;
  top: 10px;
}

ul.menu li.menu-item a {
  padding: 8px 0;
}

ul.menu li.menu-item ul.sub-menu {
  display: flex;
  position: absolute;
  flex-direction: column;
  margin-left: 0;
}

ul.menu li.menu-item ul.sub-menu li a {
  font-weight: normal;
  color: black;
  text-transform: uppercase;
}  
 <ul id="menu-mobile-en" class="menu">
  <li id="menu-item-20858" class="retail-only-element menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-20858 focus"><a href="#">SHOP</a><button aria-expanded="false" class="dropdown-toggle"><span class="screen-reader-text">Expand child menu</span></button>
    <ul class="sub-menu toggled-on">
      <li id="menu-item-9404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9404"><a href="https://staging.mysite.com/all/">All</a></li>
      <li id="menu-item-39924" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-39924"><a href="https://staging.mysite.com/eshop2/new/">New</a></li>
      <li id="menu-item-4352" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4352"><a href="https://staging.mysite.com/eshop2/boxers-for-men/">Boxers</a></li>
      <li id="menu-item-4357" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4357"><a href="https://staging.mysite.com/eshop2/briefs/">Briefs</a></li>
      <li id="menu-item-4358" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4358"><a href="https://staging.mysite.com/eshop2/tank-tops/">Tank Tops</a></li>
      <li id="menu-item-4355" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4355"><a href="https://staging.mysite.com/eshop2/t-shirts/">T-shirts</a></li>
      <li id="menu-item-4353" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4353"><a href="https://staging.mysite.com/eshop2/henleys/">Henleys</a></li>
      <li id="menu-item-4354" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4354"><a href="https://staging.mysite.com/eshop2/longjohns/">Longjohns</a></li>
      <li id="menu-item-4356" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-4356 focus"><a href="https://staging.mysite.com/eshop2/accessories/">Accessories</a></li>
      <li id="menu-item-34091" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-34091"><a href="https://staging.mysite.com/eshop2/last-chance/">Last chance</a></li>
    </ul>
  </li>
</ul>