Я не могу сделать чистое выпадающее меню

Подправляю чужой код, html - не мое. По какой-то причине в коде раскрывающееся меню меняется, иногда на две части. Я бы предпочел выпадающее меню, которое работает напрямую и не меняется. Надеялся, что кто-нибудь скажет мне, почему он действует именно так.

Ниже приведен код, и я добавляю изображения до и после.

Спасибо

<div class = "collapse navbar-collapse" id = "navbarsExampleDefault">
<ul class = "navbar-nav mr-auto">
<li class = "nav-item active">
<a class = "nav-link" href = ""></a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href=“/index.html” id = "dropdown01" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">Menu</a>
<div class = "dropdown-menu" aria-labelledby = "dropdown01">
<a class = "dropdown-item" href = "index.html">Home</a>
<a class = "dropdown-item" href = "sales.html">Sales</a>
<a class = "dropdown-item" href = "/management">Management</a>
<a class = "dropdown-item" href = "/bartending">Bartending</a>
<a class = "dropdown-item" href = "/print">My Name In Print</a>
<a class = "dropdown-item" href = "/guerillamarketing">Guerilla Marketing</a>
</div>
</li>
</ul>
</div>

Я не могу сделать чистое выпадающее меню

html drop-down-menu

15.01.2019 20:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

обычно (но не всегда) выпадающий список представляет собой вложенный список внутри li, который управляется такой кнопкой

<ul>
  <li><a href = "reg.html">regular link</a></li>
  <li>
    <button>drop down</button>
    <ul>
      <li><a href = "dropdown.html">drop down link 1</a></li>
      <li><a href = "dropdown2.html">drop down link 2</a></li>
    </ul>
  </li>
</ul>

так что ваш может в конечном итоге выглядеть примерно так:

<div class = "collapse navbar-collapse" id = "navbarsExampleDefault">
  <ul class = "navbar-nav mr-auto">
    <li class = "nav-item active">
      <a class = "nav-link" href = ""></a>
    </li>
    <li class = "nav-item dropdown">
      <button>menu</button>
      <ul>
        <li><a class = "dropdown-item" href = "index.html">Home</a></li>
        <li><a class = "dropdown-item" href = "sales.html">Sales</a></li>
        <li><a class = "dropdown-item" href = "/management">Management</a></li>
        <li><a class = "dropdown-item" href = "/bartending">Bartending</a></li>
        <li><a class = "dropdown-item" href = "/print">My Name In Print</a></li>
        <li><a class = "dropdown-item" href = "/guerillamarketing">Guerilla Marketing</a</li>
      </ul>
    </li>
  </ul>
</div>

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

<header id = "sitewide-header">
    <ul id = "visible-navigation">
      <li id = "logo-container"><a href = "#">vertical template</a></li>
      <li id = "control-container"><button id = "menu-button" aria-expanded = "false" aria-controls = "toggled-navigation">menu</button></li>
    </ul>
    <nav id = "navigation-container">
      <ul id = "toggled-navigation" aria-hidden = "true" aria-labelledby = "menu-button">
        <li><a href = "#">home section</a></li>
        <li><a href = "#">section two</a></li>
        <li>
          <button id = "dropdown1-button" aria-expanded = "false" aria-controls = "dropdown-one">three &ndash; five</button>
          <ul id = "dropdown-one" aria-hidden = "true" aria-labelledby = "dropdown1-button">
            <li><a href = "#">section three</a></li>
            <li><a href = "#">section four</a></li>
            <li><a href = "#">section five</a></li>
          </ul>
        </li>
        <li><a href = "#">section six</a></li>
      </ul>
    </nav>
  </header>

15.01.2019 21:27

Другие вопросы по теме

Раскрывающийся список mvc не показывает значение данных

Динамический выпадающий список для отношения "многие ко многим"

Очистить и щелкнуть форму селеном

Django-pgcrypto EncryptedCharField с выбором ломает поле выбора в представлении администратора Django

Выпадающий список выбора JavaScript не работает на мобильных устройствах

Могу ли я создать раскрывающийся список на карте фолио в Python?

Как получить выгоду от нескольких выбранных вариантов?

Как изменить параметр выбора на основе значения выбранного параметра?

Навбар не показывает подменю

Как реализовать раскрывающийся список с множественным выбором с флажком в Thymeleaf и отображать выбранные значения в контроллере Spring

Я не могу сделать чистое выпадающее меню

Ответы 1

Другие вопросы по теме

Похожие вопросы