CSS Menu Bar
When I was designing the menu bar (Actions Panel) of this website, I went through the web to get some reference. There are many excellent designs that I want to use. Unfortunately, I don’t want to reply on the JavaScript so much. In my point of view, JavaScript is one of the best and one of the common use for creating the menu bars. However, the clients can disable the use of JavaScript of their browsers and cause the webpage corrupted. So I concentrated to search the menu bar which doesn’t use the JavaScript (Sorry JavaScript lovers ~).
After a thousand searches, I found a webpage that titled “Pure CSS menus”. Oh! I like it! Of course I clicked on its link immediately and a warm, clear and structured webpage was shown on my browser. In fact, it is a website called “meyerweb.com” which is designed and implemented by Eric Meyer – an internationally recognized expert on the subjects of HTML and Cascading Style Sheets (CSS). It contains some of his valuable experience on web design and programming. Please take a look and you will get the stuffs more than you expected. Okay, let’s go ahead.
After I entered the webpage, Oh ~ I got it!! I got the menu bar that I imagined! Thanks to Eric that it contains a complete tutorial how to implement this kind of menu bar. It’s so surprise that this menu bar does NOT use the JavaScript for changing the background color when you’re hovering. I read it several times and then try it (that’s mean steal the code, sorry Eric 
).
I got the same result, however, except the background color changed when I’m hovering. I’ve used all the elements from Eric’s except the “z-index”. I don’t think that is related to my problem. Of course I also tested it. The color will be changed only when I’m hovering on the word exactly, not the side of the word. I feeled a little bit of headache because I tested it more than two hours, so I went to sleep and forgave it … only that night …
In the morning after that night, I continued to modify the code. Suddenly I thought I can expand the <A> element to 100% width. So I tested it and bingo! It’s done! Although I don’t really understand why I have to add 100% width to <A> element, but god bless me, it’s solved.
Here I want to thank Eric again for his experience sharing. Because of the copyright, I won’t show any of his source code here. Please refer to Eric’s article for further information about the pure CSS menus.
By Michael, written at Gloria Jean’s Coffees, Manning Building, Sydney, Australia
Note on 7 October 2003:
After I modified the CSS to be compatible with different browser recently, I found that the CSS menu works with the same result as Eric’s in NN and Opera, but only not in IE which does not expand the <A> element to 100% width. I don’t know why Eric’s works in IE but I cannot.
