Practical Examples using Absolute Positioning
This example will be best understood AFTER detailed discussions in class about absolute positioning
and the "first non-static ancestor principle" as explained in the Positioning Overview PDF provided with this lesson.
These are roughly the same CSS Flyout Menus presented earlier in this course.
The horizontal nav below currently works properly, that is until you do the experiments in the bullet list below.
For each item, do the experiment and explain exactly what is going on.
-
Experiment with different values of the top/left coordinates of the position:absolute sublists.
Where are the top/left coordinates being calculated from? Why?
-
Set top/left back to the original 100%/0px values. Remove position:relative from the primary li selector, and add it to the #horiz_nav selector for the whole primary list.
Why do both sublists now appear in the same location?
-
Now remove position:relative from the #horiz_nav selector, so that there is no more position:relative in the whole horizontal nav.
Why do the sublist now not appear at all when you hover over the nav bar.
The vartical nav below does not work properly as you can see if you hover over it.
Figure out how to set the top/left coordinates so that the submenus are positioned properly when they appear.