Quote:
Originally Posted by Dan Zollman
Hmm, this is a tricky one...
At this point, what I would do is start with the menu HTML on its own with no CSS, and start adding in the CSS one property at a time (leaving out the irrelevant ones like text-align).
My question is not why isn't the third-level menu where it should be, but why is it layered over the second-level menu in the first place.
You could also try to rewrite the CSS and use relative positioning instead of absolute positioning. Put "position: relative;" on each LI (no left or right). Then position the second and third ULs relative to the containing LI.
If that doesn't help, I'll try to come back to this tonight and spend some time looking at the CSS closely.
|
Alright, thank you. I'm going to see what I can do here, now that I have a better place to start. I appreciate the help
EDIT: After a bit of playing with it, I did finally get the menu to move over to the proper spot by adding the attribute
Code:
#navigation ul.menu li ul li ul a,
#navigation ul.menu li ul li ul a:link,
#navigation ul.menu li ul li ul a:visited {
margin-left:186px;
}
However, I am now having an issue with the top and bottom background images (which give a beveled appearance to the menu) not shifting over far enough to line up with the menu. I've tried adding an attribute that should fix it, but the attribute won't take and I'm not sure why. I am attempting to assign the attribute to "#navigation ul.menu li ul li ul li.first" and "#navigation ul.menu li ul li ul li.last", which is roughly the same as the second level menu, but with an additional li ul added (i.e. #navigation ul.menu li ul li.first) to bring it down to the third level.