2 Bulma.io элементы выпадающего меню - PullRequest
Новая
       8

2 Bulma.io элементы выпадающего меню

0 голосов
/ 21 октября 2018

Я создаю страницу, используя Bulma.К сожалению, я нашел что-то странное.При наведении курсора на одно из двух выпадающих меню, содержащих класс «Подходит», оба триггера выпадающего меню отображают оба меню одновременно.

Я бы хотел, чтобы выпадала только та, над которой наведен курсор мыши.Как я мог сделать это?

<div class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link">
                          Projects
                        </a>
                        <div class="navbar-dropdown">
                                <a class="navbar-item" href='/projects'>
                                  Projects
                                </a>
                                <a class="navbar-item" href=''>
                                  Edit
                                </a>
                                <a class="navbar-item" href="/projects/create">
                                  create
                                </a>

                  </div>
                    <a class="navbar-item" href="/contact">
                    Contact
                  </a>
                <div class="navbar-item has-dropdown is-hoverable">
                        <a class="navbar-link">
                          Vue.js
                        </a>
                        <div class="navbar-dropdown">
                                <a class="navbar-item" href='/vue'>
                                  Page 1
                                </a>
                                <a class="navbar-item" href='/vue2'>
                                  Page 2
                                </a>
                                <a class="navbar-item" href='/vue3'>
                                  Page 3
                                </a>
                          </div>

1 Ответ

0 голосов
/ 21 октября 2018

Вы не правильно закрывали div, два </div> отсутствовали.Смотрите ниже, теперь вы можете выровнять их по горизонтали с соответствующими классами / структурой Bulma. 

<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">
    Projects
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item" href='/projects'>
      Projects
    </a>
    <a class="navbar-item" href=''>
      Edit
    </a>
    <a class="navbar-item" href="/projects/create">
      create
    </a>
  </div>
 </div>
 
<a class="navbar-link" href="/contact">
  Contact
</a>

 <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      Vue.js
    </a>
    <div class="navbar-dropdown">
      <a class="navbar-item" href='/vue'>
        Page 1
      </a>
      <a class="navbar-item" href='/vue2'>
        Page 2
      </a>
      <a class="navbar-item" href='/vue3'>
        Page 3
      </a>
    </div>
</div>
...