CSS - Confusing Stuff, Son

Alright, so the "son" was a cheap add-on to make the CSS acronym work. But hey, that's the best I can do. Anyways for the task this past week, we went back in time to rediscover our old friend (and enemy... sometimes), Wicket and start thinking of how to implement things for Devcathlon using it. Particularly this week, we worked on modifying a menu bar.

For now, our menu bars are not your fancy javascript drop-down menus, but it does it's job. Borrowing the CSS code from Kalsey (http://kalsey.com/2003/05/css_tabs_with_submenus/), we have menus bars with submenu's right below it. We needed to modify the bar so we address the following issues:

• support 10 submenus (wraps around screen, and overlaps content ?)
  
• realize the shortcomings of the submenus (due to its absolute positioning)

• indicate which page user is currently viewing (by making menu link bold)
  

Problems Encountered:

I was able to figure out the last two tasks, but not without some difficulty. The hardest one was indicating the page the user was viewing. From the beginning, I knew I wanted to add a class tag "selected" and just add a class property to the CSS making the font bold. After hours of slaying away trying to get it to work, I finally got it by adding this one line to each Menu's page (plus the CSS property in menu.css):

// from SubMenu14Page
// tags corresponding link with class, "selected" for CSS to make bold
get("SubMenu14Link").add(new SimpleAttributeModifier("class", "selected"));

My Shortcomings

The only task I was not able to finish was the 10 submenus. I assume the problem occurs when there are 10 submenus, the submenus wrap around the screen overlapping the page's content. I can only assume because 10 submenus displayed fine for me because I had my window maximized.

I tried adding padding & margins to the submenus creating whitespace between the submenu and content. Nothing. I tried adding margin & padding to the content with the same idea, but that was no good. Maybe the problem is the wrapping itself. I honestly wouldn't want my list of tabs wrapping around the screen if I purposely resized my window to be smaller.

Oh well... guess I'll find out from the others when this is all said and done. I gotta say though, FireBug (which Anthony Du pointed out to me in our last mockups) was extremely useful in this exercise. Because some of my css properties weren't refreshing when I modified the files, I just used FireBug to preview properties on the fly. Good stuff.

Distribution file: [Download Link]