Submenus are weirdly padded on the left

It’s not easy to gt good css help here because it’s not specific to wp. So you’ll have to settle for me (haha).

try this:

#access ul ul li, #access2 ul ul li, #access3 ul ul li {
padding: 0;
}

Then get Mozilla Firebug.

But this changes padding on the whole nav, so try:

#access3 {
padding: 0;
}

One thing I can’t do in firebug is isolate part of a div class or id and preview it by itself. Hope this is right.

Ok, the problem is that effects spacing between menu items too.

Yes, that’s why you have to isolate the element that you want to change, I was unable to do that in Firebug. I don’t know what the css for the flyout menus looks like. But one of those elements must be it, may just be a matter of trial and error. Or maybe someone else may know and lend a hand here. But like I say, this isn’t a css forum.

this works for the twentyten theme, maybe the same for yours?

.sub-menu {

padding: 0px;
}

I found the name of the element in the wp core files, so it’s probably the same.

I’m using weaver 2010, so they should be similar, but I don’t see a “sub-menu” anywhere.

Here’s the thing. I know how to do it. I just set this to 0px:

div.menu li {
	float: left;
	position: relative;
	padding: 0px 8px;
}

The problem is that also takes away padding from the menu items. So another way to solve this is to find what else can make padding between menu items.

You don’t have to find the css for it, just paste

.sub-menu {

padding: 0px;
}

at the end of style.css. It will override previous if it exists. if no change, then it’s called something else.

must be something else, no dice.

hmm, well, as the first code I posted DOES do what you want, it’s just a matter of trying each identifier untill it produces the good result. did you try each of these seperately?

#access ul ul li {
padding:0;
}
or
#access2 ul ul li, {
padding:0;
}
or
#access3 ul ul li {
padding:0;
}

`

Yep. I just post them at the end of style.css?

yes, at the very end, one at a time.
It’s odd because I would assume since this is a core function it would be the same from theme to theme. Can’t see why the .sub-menu one doesn’t do it.

Maybe it just doesn’t override the code that adds the padding?

Yes, but that element is always described as “padding” so I can’t see how that could be. hmmm.

this seems to do it too!

#access ul ul li, #access2 ul ul li, #access3 ul ul li {
    max-width: 160px;
    min-width: 160px;
}

and it doesn’t appear to mess up anything else..

Hi your problem is here:
Change left: 10px; to left: 20px; (bare with me it does work).

#access ul ul, #access2 ul ul, #access3 ul ul {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 10px;
    padding: 0;
    position: absolute;
    top: 38px;
    width: 200px;
    z-index: 99999;
}

and here remove padding: 0 8px; with padding: 0;

#access .menu-header li,
#access2 .menu-header li,
#access3 .menu-header li,
div.menu li {
    float: left;
    padding: 0;
    position: relative;
}

Then find:

#access a, #access2 a, #access3 a {
color: #AAAAAA;
display: block;
line-height: 38px;
text-decoration: none;
}

and add padding-left: 20px; so its like:

#access a, #access2 a, #access3 a {
    color: #AAAAAA;
    display: block;
    line-height: 38px;
    text-decoration: none;
    padding-left: 20px; /* or whatever you want the padding to be  but it must match the left: above */
}

Hope I got it.