Support » Theme: Twenty Eleven » [Theme: Twenty Eleven] Styling a horizontal submenu of child pages

  • I’ve made a drop down submenu of child pages that opens horizontally under the main menu instead of vertically as by default.


    I did this quite simply by setting #access ul ul to a width of 600px (following instructions elsewhere on this forum).

    I also got rid of the box shadow, and moved (both) submenus using absolute positioning.

    Code I used is below. I’m trying to style the menu further and would appreciate some advice on how to:

    1. Remove the remnant grey line under the text, not sure where that’s coming from
    2. Remove the grey background on rollover
    3. Get finer control of the spacing of the sub menu items – would I set padding or similar?
    3. Move the submenu for ‘Text’ independently to ‘Work’, so I can also align that to the left of the page; not sure how to target that submenu independently
    4. Understand how the text size of the submenu is working – I’m using ’em’ to set the size, and the 1em size of the submenu text is huge! Would like to set the text size of the site title, main menu and submenu easily in relation to each other. At the moment 1.2em for the main menu text looks the same size as 0.65em for the submenu text.

    And is there a more elegant way to move them around than absolute positioning, will that give me any issues?


    #access ul ul {
    width: 600px;
    background: #fff;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    position: absolute;
    top: 60px;
    left: 10px;
    #access ul ul a {
    background: white;
    display: inline;
    font-size: 0.65em;
    #access ul ul li {
    /* anything I should do here? */

  • The topic ‘[Theme: Twenty Eleven] Styling a horizontal submenu of child pages’ is closed to new replies.