WordPress.org

1. Dimitri Vorontzov
   Member
   Posted 1 year ago #

   Hello Forum!

   I created a menu using Custom Menu option, in TwentyTen theme.

   The menu includes several items that have sub-menus:

   ABOUT
   Mission
   History
   People

   SERVICES
   Service 1
   Service 2
   Service 3

   PRODUCTS
   Product 1
   Product 2
   Product 3

   I want all the submenus under ABOUT to have the width of 200px; all the submenus under SERVICES to have the width of 250px; and all the submenus under PRODUCTS to have the width of 350px.

   How can I select and style the submenus?

   I would be grateful for the expert guidance.

   Best regards,

   Dimitri Vorontzov

2. Dimitri Vorontzov
   Member
   Posted 1 year ago #

   I figured it out with quite a bit of help from Matt Gibson Answering my own question, just in case someone stumbles on this post trying to solve a similar issue.

   You can add a class to a menu item. Go to Screen Options tab of the Menus page, select the CSS Class checkbox, and add the class to the desired menu.

   Curiously, classes are added to top level menu items in WordPress differently from how they're added to the lower level items. At the top level, classes are added to the <a> tag, whereas at the lower levels (submenu, sub-submenu etc.) they are added to the

   <li> tag. A bit illogical, but that's how it is.
   If you want to make all the submenus a certain width (for example, 400px) you have to add the same class to each of them, and then write this in your css file:
   

   #access ul ul li.someclass > a {
   width:400px;
   }

3. mokidad
   Member
   Posted 4 months ago #

   On my Twenty Ten, things were already put in with a sub-menu class, so without adding the Screen Options, I was able to add the following to my style.css file:

   #access ul ul.sub-menu {
   background-image: url('some-backing-image.png');
   }

Topic Closed

This topic has been closed to new replies.