I'm making a website as a project, and I need to make a vertical navigation sidebar. I have it set up as an unordered list, with two of the three elements having sub-unordered lists. I've repositioned the child unordered lists using relative positioning to right next to their parent links. Right now, everything works except for the fact that when you hover over the middle element of the parent unordered list, the bottom element moves down as if the nested unordered list was still in the same position. I know that if I were to position the child unordered lists using absolute positioning, I would not have this problem since using absolute removes it from the regular document flow or something link that... but I don't want to do that. Does anyone know how to position something relatively but have it act like it's absolutely positioned? Here is a link to the actual webpage http://s156012030.onlinehome.us/poetry, and here is to the stylesheethttp://s156012030.onlinehome.us/poetry/style.css
If it were the same there
If it were the same there wouldn't be any point to its existence. position:relative does two things:
- establishes a new positioning context for it's children
- can use offsets to shift its location - but it always leaves the space it would normally occupy behind.
- you need a doctype, without it a browser doesn't know for sure what standard it is using to display the page. Different browsers could be very different.
- your html could well be faulty, the menu doesn't have any flyouts in FF. IE is an old browser and doesn't do many things the way the standard says it should.
What is it you're attempting to achieve?
Why don't you want to use position:absolute?
It seems that adding the
It seems that adding the doctype made all hell break loose, but I plan on fixing all of the errors really soon. Anyways, I think you understand what I'm trying to do... I'm trying to make a menu with flyout submenus. I think after you look at these screenshots, you will understand what I was saying and what I my problem is. http://s156012030.onlinehome.us/poetry/ss.html I do not want to use absolute positioning because I plan to use this script in the future for sites where users are able to add navagation links. I currently have a separate file that lists the links on the side bar in a Wikipedia-esque style using brackets and pipes, and a php script that interprets it. Using absolute positioning would require hardcoding positions into the stylesheet, something that (I think) could get way out of hand... I obviously have more experience in other langauges than css, so if anything I say is wrong please correct me. I'll post another reply once I fix all of the problems that arose from the doctypes.
I don't think you can do it
I don't think you can do it any way besides absolute positioning. You can use the same offsets for absolute positioning that you are currently using for relative positioning. What you need to do is put position:relative on the menu-item the sub menu is flying out of.
Google about for CSS Menu Horizontal Flyout.
Stu Nicholls stuff is normally pretty (very) good, so you probably can't go far wrong with the demo on his site.
Personally, I have a very low regard for horizontal flyout menus. In my experience users struggle with them. As the most direct route to many of the flyout items is across other menu items - which of course leads to menu failure. Vertical dropdowns avoid this problem but occlude content. Again in my opinion, you are better off simplifying you navigation system so you don't require flyouts. Personally I think click/expand or click/load new page work better.
Maybe that would be
Maybe that would be better... if I were to do the click/expand method, is there a way where I can load all of the expansions on the page so that when the user clicks to expand the item the page doesn't have to reload? It is really annoying to have to load the whole page again just so two or three extra links appear on the screen.
You can't do a click/expand