UL and OL list Rollover Tutorial

This Tutorial is an attempt to simply and clearly show the basic behaviors of ULs and OLs (HTML Unordered Lists and Ordered Lists) and their LIs (List Items) to make it easier for you to understand how ULs work and how to design your own list-based navbars.

I know I’ve read several “tutorials” on creating flyout and offset rollovers and such. While some have been fantastic, particularly what they show you how to do, they all seem to fall short in acknowledging that the reader may not know all of the intricacies of HTML (XHTML) that the authors know. These tutorials wind up being extremely obtuse, neglecting to answer some “dumb” (but important) questions.

This is the first (crap) draft and is a work-in-progress. Please add your comments if you see anything that could be improved and stay tuned.

Notes: Position:Absolute Flyout Rollovers

  1. The CSS selector has to be in a DIV just outside of the UL to have the Level #s make sense.
  2. Child layers inherit their parent’s colors.
  3. Placing :hover on the LI makes the whole thing react rather than placing it on the A.
  4. Display:None; to hide the subordinate ULs.
  5. Display:Block on :hover UL to make them display when rolled over.
  6. Children inherit Margin and Padding unless they are specified otherwise.
  7. Default offset is a few pixels down from the baseline of the text in the LI or the link and about 1em from the left.
  8. Zeroing Margin removes the “left indent” on the 2nd UL/LI level, but that is not inherited by the children.
  9. Forcing a negative Left Margin on the 3rd UL/LI level will make it line up with the previous element, if that is desired. This is inherited by the next levels.
  10. A negative Margin-Top and a positive Margin-Left can position the child UL/LI directly on the right of the parent LI. This is inherited by the next levels. Zeroing the child Margins defaults the offset. This may be fine since it indicates that these are children or subsets.

Comments are closed.