as for your problem 1. class or id's cannot begin with a number so a class of "1", "2", "3" doesnt work. 2. quote from the document I just linked. without quoting the entire document, it has all the answers you need.
it would if you read it all. 1. it will tell you how to do it 2. it will tell you why its not doing it currently 3. it will tell you how to actually use positioning, and how not to use it. sure it wont s-p-e-l-l it out for you but its all there.
well it all depends on what position value you have on box 1,2 and 3 if box 1 is relative and box 2 has no positioning on it and box 3 is absolute top:0;left:0 it will sit in top:0;left:0 in box 1 HTML: <!DOCTYPE html> <html> <head> <style> #one { position:relative; top:100px; left:100px; } #three { position:absolute; top:0; left:0; } p {margin:0;padding:0;) </style> </head> <body> <div id="one"> <p>some paragraph</p> <div id="two"> <p>some paragraph</p> <div id="three"> <p>some paragraph</p> </div> </div> </div> </body> </html>
My problem still stands. When I give box 3 a position of absolute, it overrides the overflow: hidden and shows up without the box 2: hover.
well, without an "in situation" problem, we are only hypothesising, if you care to share a link to what your working with I may be able to understand your specific issue a bit better.
OK so looking at what you've got there I'm guessing you are wanting to line up the hovers on all four menus to start at the left edge? try adding Code: .main-nav ul li:nth-child(1) .secondary-nav .secondary-nav-container { left:0; } .main-nav ul li:nth-child(2) .secondary-nav .secondary-nav-container { left:-100px; } .main-nav ul li:nth-child(3) .secondary-nav .secondary-nav-container { left:-200px; } .main-nav ul li:nth-child(4) .secondary-nav .secondary-nav-container { left:-300px; }
I've done that one before but here's my problem with that. After I get things working, the nav bar becomes more complicated. Look now.
thats because you've now removed the width on the list items. because .secondary-nav-container is absolute, and .secondary-nav is relative. .secondary-nav-container starting point is ALWAYS left:0 of .secondary-nav if you dont know how far removed from the initial position it is you cannot set a compensation value.
either put the width back in, and stop creating headaches for yourself or find a javascript alternative. your whole menu bar is 800px, why not have the li be 100px, that gives you 8 menu items to add. keeps the math simple, and besides odd shaped menu's look ugly. always. and they break the grid entirely. but you know, its your call... and... there are only 2 divs. where does this third one come from? .secondary-nav-container + .secondary-nav
even now that you've got it centred, if you had a width on the list item you could neatly line up the hovers...
I just thought of something. I used to have an image of something and the numbers 1 through 5 below it and as I hovered over each number, the image above it would change. I can't remember how I did it. That would work. I think. I remember onmouseover and target. I'm not sure this could be used in a overflow:hidden situation