Enhanced Suckerfish Menu
3. CSS
Join the Discussion
More of this Feature
With the HTML part of the menu written and fully functional it is time to create the stylesheet. The first thing to do is to save the following code in a file called sfmenu.css.
The highlighted entries are what sets the colour of your menu entries and of course you can use whatever colours you want but you should leave the rest of the code exactly as shown if you want the menu to function correctly. See below the code for a list of what colour entries in the code affect which part of the menu appearance.
#nav {margin:0; padding:0;list-style: none; position:fixed; top:0;left:0;z-index:900;}
#nav a {display: block; width: 10em;}
#nav li {float: left; width: 10em; position:relative; height:1.2em; border: 1px solid #ccc; background-color:#66f;}
#nav li a {text-decoration:none;color:#fff;}
#nav li ul {margin:0; padding:0; position: absolute; width: 10em; left: -100em; top: 1.2em;z-index:910;}
#nav li li {background-color:#cff;color:#600;}
#nav li li a {text-decoration:none;color:#66f;}
#nav li:hover ul, #nav li.sfh ul {left: 0;}
#nav li ul ul {list-style: none;margin: -1.2em 0 0 10em; padding: 0;border-top: 3px solid #000;z-index:920;}
#nav li:hover ul ul, #nav li.sfh ul ul {left: -100em;}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfh ul, #nav li li.sfh ul {left: 0;}
* html #nav {position:absolute;}
- #ccc sets the borders on all your menus to light grey
- #66f sets the dark blue colour of the background of the main menu bar
- #fff sets the text in the main menu bar to white so that it is visible against the dark background
- #ccf sets the cyan background for the second and third levels of the menu
- #600 sets the text for those second level menus that have a third level menu attached to a dark red to distinguish them from those that don't
- #66f sets a dark blue again, this time for the text of the actual links within the second and third levels of the menu
With the stylesheet created we just need to link it into our web page. Since Netscape 4 does not understand many of the commands in this code we will attach it a way that will hide the stylesheet from anyone still using that browser. Simply add the following to the head of your page.
@import url(sfmenu.css);
</style>
Your menu should now function properly in modern browsers. All that remains to be done is to add the Javascript that will allow the menu to function in Internet Explorer and which will also stop the menu scrolling out of view so that it will always be available.
