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

Question

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

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

все подменю второго пункта меню должны иметь ширину 250 пикселей,

и все подменю третьего пункта меню должны быть шириной 300 пикселей.

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

ОКОЛО

• миссия
• история
• люди

СЕРВИСЫ

• Service1
• Service2
• service3

ТОВАРЫ

• 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;
}