Nav sub-menu blocked by #main div

HTML & CSS
1

See URL: http://testing.backstageweb.net/ Two issues here, related.

On the main menu, mouse over “Donate” - the 4th sub-menu item is going behind div #main. The second issue is, that same sub-menu has a child menu (with the same issue) and is also being cut off by the constraints of the wrapper.

#main {
	background: #FFF;
	clear: both;
	}

#nav ul li {
	background-color:#000000;
	color:#fff;
	outline:0;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border-bottom:1px dotted #937c52;
	-moz-box-shadow: 4px 4px 4px #444;
	-webkit-box-shadow: 4px 4px 4px #444;
	box-shadow: 4px 4px 4px #444;
	font-size:.9em;
	}

Any help is appreciated - thanks!

2

Welcome to the forums, johndove,

I cannot get to your CSS style sheet :confused: and the snippet you provided is not enough to let me see what you are actually doing. remember that code interacts with ALL other code so anything you do affects everything you do.

At them moment tho , am guessing, that your sub menu is in fact NOT going behind your main, but getting cut off from the display.
I am guessing section.row and/or section.wrapper probably have overflow:hidden; applied to them which is causing your sub menus to be cropped. I would use a different clearing method for these two specific elements to fix this problem.

3

Dresden,

You are correct, both row and wrapper have an overflow:hidden on them… suggestions? Thanks!

John

4

Removing overflow:hidden from row gives me the child menu: (01.jpg), removing overflow:hidden from wrapper gives me the child menu: (02.jpg). How do I remedy this?

5

"…removing overflow:hidden from wrapper gives me the grandchild menu: (02.jpg)

6

As this class is probably applied to other things in your cod you have painted yourself in a corner here, w/o seeing all your code…I would suggest adding an ID. this is kinda heavy handed , but it will make sure we override that code for those specific elements.

  1. so lets say #mainWrap, and #brandHed

#mainWrap,  #brandHed {overflow:visible; display:inline-block;padding:0; margin:0 }
    #mainWrap{width:100%; text-align:middle}
    #mainWrap div{ text-align:left}

If you do have padding then use use this instead


#mainWrap,  #brandHed {overflow:visible;
	zoom:expression(
		runtimeStyle.zoom=1,
		insertAdjacentHTML('beforeEnd','<span class="after"></span>')
	);
}
#mainWrap:after,  #brandHed:after,#mainWrap .after,  #brandHed .after {display:block; clear:both; content:""; height: 0;visibility: hidden;}

if we have targeted the right elements that should fix it.
hope that helps.

7

Dresden,

I’m sorry, you lost me. Why can’t you see my code? Firebug displays everything. (?) Also, what does #brandHed apply to?

Thanks,

John

8

I would say the best option is to remove overflow: hidden from the .wrapper and .row classes and do this instead (as ugly as it looks):

section section section section.row {
  overflow: hidden;
}

This is why I wouldn’t put the same class on nested elements. It can lead to a lot of troubles.

9

Thank you guys very much!

10

Cool, glad that helped. I see you’ve removed the sub sub item. Was that just for testing purposes? :slight_smile:

11

Yes. : )