You probably very well know the sub-menu that is “flying-out” from the main navigation on hover.  Many free WordPress Themes are equipped with that rollover-sub-menu and while it may be a nice thing to have, sometimes you want to style it in peace and quiet. And that can be difficult, since it is usually hidden and only shown on rollover (hover) – so working on the sub-menu can be a bit demanding, to say he least.

The right-mouse-button-trick can be handy, to at least check which part of the Style Sheet is doing what: right-clicking on one of the sub-menu’s elements makes the sub-menu stay – and you have virtually all the time in the world to explore the different style instructions put upon it. But after the next reload the sub-menu will be hidden again – and you’ll start all over again: hover, right-click, explore…

So sometimes you may want to really disable the hover, or whatever / who-ever is triggering the sub-menu to show and hide, so you can work on the design details without the actual rollover-effect in action. I was basically looking for a way to have the sub-menu jacked up like a car so I could crawl underneath it and really check out all the css style and design details. This could really speed the development progress up a bit – I hoped.

I just spent some time (actually too much time!) checking out where the actual css ‘command’ is situated, that makes the sub-menu disappear – and re-appear on rollover. First I looked for something like display: none or visibility: hidden but that didn’t lead anywhere. Finally I found it – and maybe this little piece of information is also valuable for somebody else – so I’ll better share it right here / right now, so that also other WordPress–Developers may jack up the sub-menu and crawl under it.

The style sheet of the WordPress-Theme Twenty Twelve has an area for screens wider than  > 600px – there are some style ‘commands’ referring to the unordered second level list that makes the sub-menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
        height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

This above style information shrinks the sub-menu-container (ul) to 1×1 pixel – and the overflow: hidden; hides everything, that would otherwise be visible outside that 1×1-pixel-container.

A few lines further down this style instruction is then abolished and the sub-menu becomes visible:

    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus > ul,
    .main-navigation .focus > ul {
        border-left: 0;
        clip: inherit;
        overflow: inherit;
        height: inherit;
        width: inherit;
    }

By simply commenting-out the first style information about height, width and overfow, the default state will be the ‘hover state’ so you can see the sub-menu all the time, without hovering the main menu:

.main-navigation li ul {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 100%;
        z-index: 1;
       /* height: 1px;
        width: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); */
    }

So… Now you know how to jack up the sub-menu, crawl under it and do some styling in peace and quiet.