inline block padding

[sprogg]

Problem with the display on the navigation menu in a wordpress site. The navigation looks good until you hover over it. I would like to get the drop down resized to something sensible but I cannot figure out the required changes to the css.

The css is

.topbar-right .topbar-level-1 li a, .topbar-right a {
    color: #FFF;
    font-size: 13px;
    line-height: 30px;
    display: inline-block;
    padding: 120px 10px 0px;

Website is Your text to link here…

Would really appreciate some help here as I am completely stuck.

Thank you

[Paulie_D]

The navigation looks good until you hover over it.

Are you referring to the log-in section…?

I’m not seeing anything happening on hover of that link.

[sprogg]

Ah, yes, you are correct. You need to be registered to see the problem.

I have created a temporary log in.

Please use guest/demo

[Paulie_D]

There’s something fundamentally wrong here with the positioning of the menu and thus the ‘sub’ menu but I need time to work it out.

Removing ALL that padding would be a start though.

Also resetting the margins as this

media="all"
h1, h2, h3, h4, h5, h6, p, dl, ul, ol {
margin: 0.8em 0 0.3em;
}

is making the hover difficult.

If you take off all the padding and set the margins to 0 the submenu operates pretty well BUT the top level menu is out of place.

That I’ll have to look at.

[Paulie_D]

OK, I haven’t had a lot of time to look much further but the initial problem seems to be that .topbar-left and .topbar-right are posiitioned absolutely instead of more..ahem…traditional layout methods.

I’d be looking at other options for laying out those two divs…everything else should follow.

[Author]

Posts