Adding Menus to our banner page

Continuing our Layout for our Class Web Page

We diverted our attention after we constructed our banner to learn different ways of making navigation elements for a web page. I used Ian Lloyd's accessify.com's  "List-O-Omatic" to make some menus for our demo class web page...
double click on the image of the page... to look at the source... I made comments where I made some changes to the List-o-matic markup...

The Vertical Menu

I rarely use position absolute to place an item on a page unless I must... In this case, in order for the sub-menus to not interfere with the layout of the rest of the page, the drop down menus, must be on top of all the other items on the page...
So I put the menus in a div, named it id ="horizontalmenu" and then positioned it absolutely.  How did I center the menus?
Try and puzzle it out... then Look at the source!

The Horizontal Menus

List-o-matic can't make horizontal sub menus, so the submenus are just more list items... (It's possible though). To position the horizontal menus I had to use position relative to move the list down so that the vertical menus didn't cover up the horizontal menu...
Adding your main content is next...
I found this very interesting web page that let's you make your own layouts...
It's called YAML Builder, "Yet Another Multicolumn Layout"
Have fun!  More soon!