hi everyone. i am stumped with this css problem. i am currently working on a superfish menu and i am not sure how to correct a problem with the menu in my Css code. anyone in the know? please help if you can. this is the site with the menu.
u will see what i mean when you move your mouse over the “behind the scenes” button. i have attached a screen shot
ive been messing with the code for days now with no luck.
Hi jgbauer, welcome to SitePoint! 
Here is a live link: http://windsofchangetv.com/
Before making suggestions, could you clarify how you want the menu to look? E.g. Where do you want the flyout to sit. I can see the problem, but don’t actually know how you want it to end up.
thanks ralph well what happends is that when you mouse over “behind the scenes” the menu doesn’t align properly you can see a bit of an overlap.
also on the new popped up menu when you move your mouse over them the hover bg fills a space to the right of about 30px where the normal bg is just transparent.
trying to fix the alignment as well as fill that transparent space.
any suggestions im stumped.
trying to get the popup menu to line up with the right edge of the main menu.
Yep, I can see what’s happening; but I was asking what “properly” actually means. That is, what would be the proper alignment? Do you want the left side of the popups to align with the right side of the main menu? (You have an idea in your mind of what the “proper” look is, but before I make changes I need to know what look you are after. We could, of course, put the popups on the far right of the screen… which is obviously not what you have in mind )
The main problem seems to be that you <ul> is not wide enough. The <a> links are set to width: 100%, but they also have 1em right and left padding, making them wider than the <ul>. The <a>s have a bottom white line, which makes the menu appear to have the corrdct width, as the white lines fill the column; BUT, they are actually hanging outside the <ul>. So when you hover over a link, the popups are sitting right beside the parent <ul>.
SO: you need to change the width of the <ul> so that it will actually fill the column, and then reduce the width of the <a>s to account for the padding (because padding is added to overall width, making the <a>s more than 100%.
I’ve had a bit of trouble testing the changes from my end, hence I can’t post the actual code you should use. The widths are all mixed up anyway: ems and %s, which doesn’t help.
I hope these suggestions can set you in the right direction. Otherwise, I’m sure someone with a better eye will post some code.
ok im making headway. i made some changes. the menus are lining up but now the problem is that the hoverbgs and the horizontal lines are extending past what i want. you can see what i mean on the live site.
Hi, on this rule “.sf-menu, .sf-menu *” you set a width:181px. That rule will target all children. Anchors included ;).
So you set padding on the anchor and then taht width and that’s forcing it too wide.
You can set width:auto on a rule with higher specificity to overcome this
.sf-menu a{width:auto;}
Sweet!!! ok im one step closer. ok last problem remaining in the menu. everything else is fixed. thank you thank you the last problem is that after you mouse over onto the submenu the hoverbg on the main menu shrinks by about 30px.
The last problem is easily corrected.
It is caused by the width change you have on hover. Quickest solution would be to just remove the width rule here.
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #99c2e7;
outline: 0;
[COLOR="Red"]width: 151px; [/COLOR]
}
And it is the padding expanding the link background before the mouse travels to the sub-list, that’s making the link look right at default font-size.
.sf-menu a {
border-left: 1px solid #;
border-top: 1px solid #99c2e7;
padding: .75em [COLOR="Red"]1em[/COLOR];
text-decoration:none;
}
Try removing the 151px width here and adding the 181px width here.
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #99c2e7;
outline: 0;
[B]/*width:151px;*/[/B]
}
[B].sf-menu li:hover,.sf-menu li.sfHover {width:181px}[/B]