Following on from the theme of simple CSS based menus from Menu Suite One I have added a bit more interest to the first menu her by using an image of a football as the background to the 'hover' state of the menu list. I have also resized the hovered text to 20px for more emphasis.
Taking this concept one step further I have used an image and increase in text size for both the 'active' and 'hover' states. I have also added a red background to the 'active' state to finish off the effect.
This menu returns to using a single image as a repeating gradient background to the list itself. I have then used quite a bold colour on the 'hover' and 'active' state text and border to highlight each button as it is hovered over or selected.
This menu does some SHOUTING and is verging on the ridiculous but it is showing the potential to use quite big variations on a theme for each of the four states. The 'link' state has a background image on the right of the text link. The 'hover' state increases the text size by 10px and also shows a 30 x 30px version of the target image. The 'active' state uses a text decoration to underline the text to indicate that it is the current link. Finally, the 'visited' state uses another text decoration to put a line through the text and the text is also shrunk down to 14px. This shrinks the 'button' as well. OK, bit mad for a website but there are more subtle ways to use the power of styling all four states!
Last but, by no means, least here is the Cyclon Menu. No, not the modern Battlestar Galactica where all the robots have skin but 1970s Battlestar with 'Face' out of the A-Team. I think that this is where CSS menus have to stop. For the modern web2.0 methods for building websites with menus that do really interseting stuff, and smoothly, then you are looking at learning a bit of javascript (or at least how to 'plug it in' to your web page). My next set of menus will be javascript based. Make sure you come back to see more. Do always remember though, that a simple CSS based menu can be all you really need.
Welcome to the Corrosive Online Menu Suite Two
Below are some menus created with simple CSS. Each menu has corresponding styles in the attached stylesheets. There is a link at the foot of this page to download a zipped copy of all the files used so that you can mess around with them as well. Enjoy!
PS Apologies that the bottom menus put the screen back up to the top...I will get this fixed!