Проблемы с дизайном выпадающего меню в Wordpress

Question

В Wordpress я пытаюсь создать раскрывающееся меню, используемое в .primary-menu. К сожалению, все идет не так, как планировалось.

Я скопировал HTML от инспектора в Chrome и удалить помехи, такие как HREF-х и идентификаторами и пытался отладить его в jsFiddle: https://jsfiddle.net/1cL8fq8b/1/

При наведении курсора на вкладке Результаты последнего item, .sub-item, кажется, принимает ширина его родителя. Я дал .sub-menu абсолютное положение, чтобы сделать его независимым. Тем не менее я не могу получить .sub-item, чтобы иметь собственную ширину. Here's a screenshot for a better view.

Как я могу сделать подпункт имеющим собственную ширину и не полагаться на его ширину?

Answer 1

Вы можете добавить негативный margin-left стиль расширить выпадающее меню слева.

.sub-menu { 
     position: absolute; 
     right: 0; 
     display: none; 
     margin-left:-100px; 
} 

Смотреть это: https://jsfiddle.net/jokbd6L5/

Или определить пользовательскую ширину для ниспадающего:

.sub-menu { 
     position: absolute; 
     right: 0; 
     display: none; 
     width:100px; 
} 

См й is: https://jsfiddle.net/hjoctv5x/

Поскольку его положение является абсолютным, я не думаю, что есть способ в CSS, чтобы он расширялся в соответствии с шириной его содержимого (ширина переменной). Но вы можете написать javascript для вычисления максимальной ширины содержимого для каждого раскрывающегося меню и соответственно установить ширину меню выпадающего меню.

Answer 2

Это потому, что при наведении его display установлено на block. Установите его в inline-block вместо

Answer 3

в первую очередь .. читать это http://learnlayout.com/position.html

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

Так в основном абсолютное позиционирование только берет его из документа потока

также .. этот кусок кода ..

&:hover .sub-menu 

только нацеливание подменю. Попробуйте настроить таргетинг на li подменю, чтобы придать ему свою собственную ширину. подменю уль (что Таргетинг не имеет ничего общего с шириной Ли, если только они не имеют такой размер, основываясь на процентах.