Support » Themes and Templates » Styling Submenu Elements Depending on the Parent: TwentyTen

  • Resolved Dimitri Vorontzov

    (@dimitri-vorontzov)


    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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Dimitri Vorontzov

    (@dimitri-vorontzov)

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

    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');
    }
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling Submenu Elements Depending on the Parent: TwentyTen’ is closed to new replies.