Многоуровневое выпадающее меню в CSS не работает должным образом - PullRequest
Новая
       28

Многоуровневое выпадающее меню в CSS не работает должным образом

0 голосов
/ 04 апреля 2020

Я стараюсь продуктивно проводить время, играя с CSS и HTML. У меня есть меню с двумя уровнями, где второй уровень отображается при наведении курсора. И это работает, но не так, как мне бы хотелось. У меня есть несколько проблем с этим:

  • Меню второго уровня не смежно с первым уровнем меню.
  • Пункты меню второго уровня разбросаны по элементу меню первого уровня, которому они принадлежат и не плавайте справа от него, как они должны.
  • Слева от меню есть поле неизвестного происхождения. Вы можете увидеть это, если посмотрите на границу.
  • Стиль второго элемента меню также влияет на второго потомка второго уровня. Inline CSS решает эту проблему, но есть ли другое лучшее решение?

Код можно увидеть на следующей странице . Можете ли вы указать мне мои ошибки, пожалуйста?

1 Ответ

1 голос
/ 04 апреля 2020

Чтобы зафиксировать положение подменю и предотвратить изменение размера элемента в главном меню, вы можете сделать следующее:

дать подменю (ul element- может быть тем, что вы объявили как .menu ul li ul):

  • position:absolute
  • padding:0 (встроенный отступ элемента ul - это то, что вы назвали "полем неизвестного" origin ")
  • left:100% для установки местоположения подменю.
  • top:0 для установки местоположения подменю.

укажите его родительский (li element- может быть тем, что вы объявили как .menu li)):

  • position:relative

Что касается последнего вопроса, лично я думаю, используя "nth -чайлд "для вашего случая - не лучший выбор. Я бы предпочел использовать выделенный класс для активного элемента.

Но если вы хотите решить, что вы здесь сделали, просто уточните c о каком элементе Вы хотите стиль: вместо этого селектора: .menu ul li:nth-child(2), используйте этот селектор: .menu > ul > li:nth-child(2). поэтому стиль будет применен только ко второму прямому li дочернему элементу главного меню.

...