Меню WordPress TwentyTen: как выбрать CSS подменю в определенной позиции?

Question

Я оформляю верхнее меню темы WordPress TwentyTen.

Я хочу, чтобы все подменю первого элемента меню имели ширину 200 пикселей,

все подменю второго менюширина элемента 250px, ширина

и все подменю третьего элемента шириной 300px.

Например, меню имеет следующую структуру:

ОБ

• Миссия
• История
• Люди

УСЛУГИ

• Сервис1
• Сервис2
• Сервис3

ПРОДУКТЫ

• Product1
• Product2
• Product3

Я хочу, чтобы все элементы в разделе О былиШирина 200 пикселей, все элементы в разделе УСЛУГИ должны быть шириной 250 пикселей, а все элементы в разделе ПРОДУКТЫ - шириной 300 пикселей.

Как выбрать их в WordPress, используя только CSS?(Учитывая, что меню генерируется динамически, а в заголовке есть только команда wp_nav_menu?)

Answer 1

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

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

Как только это будет сделано, вы можете придумать, как душе угодно ...

Answer 2

Используйте css-селектор, соответствующий каждому уровню. Как это:

#access ul {
   width: 200px;
}
#access ul ul {
   width: 250px;
}
#access ul ul ul {
   width: 300px;
}