CSS многоуровневое расположение выпадающего меню - PullRequest
Новая
       15

CSS многоуровневое расположение выпадающего меню

0 голосов
/ 10 ноября 2010

Я разрабатываю веб-сайт , связанный здесь с 3-уровневыми выпадающими меню (основной и 2 подуровня). Я разрабатываю с MODx cms и Wayfinder для создания меню. CSS где-то выбирается, сильно модифицируется и работает, но я не понимаю 1 деталь.

Когда вы смотрите в меню сайта: самый правый пункт главного меню (" links ") -> Links 1.2 , подменю 2-го уровня " Links 1.2"приятно появляется слева от подменю 1-го уровня (внутри более легкого содержимого тела.

Подменю 2-го уровня располагаются как " Слева: 120px (ширина 1 элемента): это смещает его и сдвигает вправо. См., Например," beeld & geluid "->" Audio " -> подменю 2-го уровня

Для этого самого правого подменю, которое появляется внутри контента, оно работает, смещая его влево , используя отрицательное смещение: Влево: -240px; (что является шириной 2 шт.)

Что мне не хватает: почему это отрицательное смещение должно быть 240px 2 элемента вместо 1 элемента 120px. Последнее, что я ожидал.

CSS содержит комментарии, и соответствующие строки в CSS-файле имеют значение 155 -161 (вы должны получить его с сайта, поскольку, как новый пользователь, я не могу добавить вторую ссылку, поскольку новые пользователи ограничены 1 ссылка на макс)

Вопрос:

Может кто-нибудь объяснить это мне? Отрицательное смещение 2 вместо 1 элемента?

С уважением,

Троица Ганса

1 Ответ

2 голосов
/ 10 ноября 2010

Что происходит, так это то, что в первом выпадающем меню элементы списка установлены относительно.Затем идет второй уль, но он позиционируется абсолютно и прилегает к предметам (во всех случаях вправо).Однако, поскольку подменю под элементом «ссылки» попадает на веб-сайт, оно располагается слева -240 пикселей.Не -120px, потому что он будет располагаться поверх первого подменю.Имеет ли это смысл? 

--------------------------------------
Top item 1 | top item 2 | top item 3 |
--------------------------------------
                        | sub item 1 |
           ---------------------------* * * * * * *
           | subsubitem | sub item 2 | subsubmenu * <--  this is the ul that is positioned
           ---------------------------* * * * * * *      absolute
           -240px       -120px        0px          120px

заключение

Так что я хочу сказать, что ul расположен в том же месте, однако li смещены влево.И поэтому ему нужно -240px, потому что он расположен относительно ul.

...