Выпадающее меню CSS, видно, что оно не работает

#css #drop-down-menu #visible

#css #выпадающее меню #видно

Вопрос:

РЕДАКТИРОВАТЬ: Просто на случай, если кто-нибудь в будущем обнаружит это, я обнаружил, что решение состояло в том, чтобы перейти от использования visibility: к display: , поэтому в коде

видимость: скрыта; становится отображением: отсутствует; видимость: видимая; становится отображением: блок;

Так и не выяснил точно, почему его видимость не работает при 4-м вложении, но, по крайней мере, это, похоже, исправляет это

Привет, ребята,

В настоящее время я работаю с выпадающим меню, которое создано с использованием некоторых CSS и списков. Оно работает нормально, но по какой-то причине 4-й уровень этого меню не прослушивает команду visibility: hidden;. Согласно element inspector, элемент указан как включенный, но на самом деле он этого не делает.

Пример здесь:http://dev.hutchup.com/test/css-dropdown.htm

Я не буду передавать код, поскольку он слишком логарифмичен и его можно увидеть по ссылке выше

Как вы можете видеть, первая ссылка уровня 2 при наведении на нее курсора отображает уровни 3 и 4, когда она должна отображать только 3, а затем, когда li в 3 переносится, она отображает 4-й уровень.

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

Я потратил часы и не могу это исправить, так что заранее благодарю вас!

Ответ №1:

Не уверен, но такое количество уровней вложенности — это пугающий бизнес, и в наши дни, вероятно, лучше справиться с каким-нибудь простым JavaScript с резервным вариантом (особенно если это тонны вложенных уровней), хотя я заметил две вещи ;

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

    .moduletable_topmenu ul.menu li.item69 a {
    height: 2.5em;
   }
   */

   /*
   .moduletable_topmenu ul.menu li.item89 {
    height: 3.7em;
   } 

   .moduletable_topmenu ul.menu li.item89 a {
    height: 2.5em;
   }
  

Эти li.item[n] элементы либо остались от чего-то другого, либо какие-то будущие идеи не реализованы, но они, безусловно, не относятся к рассматриваемому меню.

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

1. Да, я знаю, что оно грязное, но оно выводится CMS, и это самый чистый способ сделать это (по крайней мере, это не таблицы, как некоторые доступные опции : ( )