CSS Menus

This page gives you more information about how CSS menus work.  Refer to Custom Tags for more information on different tags available.

Here is some example dynamic menu HTML code created by the CMS tool.
Note that the active menu item has a different style class, so you can give this one a different style or background.

<DIV id=menu>
<UL id=nav>
<LI><A href="../../67085/search/sitemap.html"  class=menulink>FAQ Help Map</A>

</LI><LI><A href="/tutorials.html"  class=menuactive>Tutorials</A>

</LI><LI><A href="/addingpages.html"  class=menulink>Adding Pages</A>

</LI><LI><A href="/bulk-email.html"  class=menulink>Bulk Email / Members</A>

</LI>
</UL>
</DIV>

And here is an example CSS stylesheet to turn the list above into a horizonal menu, with 2 levels of dropdown and popout menus.

 

#menu {
 width: 100%; 
}

#menu ul {
 list-style: none;
 padding: 2px;   /* padding to buttons */
 margin: 0 ;   /* indent from outside div */
}

#menu li {
 float: left;     /* left for horizonal menu, otherwise its vertical. */
}

#menu a {
 text-align: center;  /* position text within li button */
 text-decoration: none; /* remove typical underline */
 font-size: 9pt;    /* menu text size */
 display: block;    /* treats layout of buttons like they're table cells rather than list items */
 width: 100px;   /* button outside dimensions */
 color: white;  /* link text colour */
 background-color: #333;
 padding: 2px;   /* padding of text within button */
 margin: 1px;   /* padding of button within list item */
}

#menu a:hover {  /* override as neccesary for mouse over effects */
 color: white;
 background-color: #666;
}

#menu ul ul {  /* this one is the dropdown */
 position: absolute; /* so we can hide it */
 left: -999em;  /* by default it is hidden */
 width: 120px;  /* width of the entire dropdown */
 margin: 0;  /* relative position of the menu to the button... 0=tight on bottom.. */
 background-color: #666; /* color of the entire dropdown */
}

#menu ul ul ul {
 position: absolute;
 top: auto;  /* auto means that it will be in the typicall indented list position below the first menu */
 left: 0;   /* 0 */
 margin: -20px 160px;       /* adjust the margins to position the 2nd level popout menu to the right*/
 width: 120px;   /* width is based on the containing block */
 background-color: #666; /* color of the entire dropdown */
}

#menu ul ul a {  /* override colours for drop down buttons */
 background-color:#666;
 color:white;
 width: 200px;
 text-align:left;
 font-size: 10pt;
 border-top: 1px  solid white;
 border-left: 1px  solid white;
 border-right: 0px ;
 border-bottom: 1px  solid #000000;
 padding:2px;
 margin: 0;
}

#menu li ul a:hover {  /* override colours for drop down buttons */
 color: #ffffff;
 background-color: #000000;
}

#menu ul li:hover, #menu ul li.sfhover {
 color: blue;
}

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul
{
 left: -999em;
}

#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
 left: auto;
}

Websites with submenus, will have additional html code marked in bold

<DIV id=menu>
<UL id=nav>
<LI><A href="#"  class=menuactive>Home</A>
</LI><LI><A href="/aboutus.html"  class=menulink>About</A>
<ul><LI><A href="/aboutus.html"  class=menulink>About Us</A></LI><LI><A href="/comments.html"  class=menulink>Comments</A></LI></ul>
</LI><LI><A href="/products.html"  class=menulink>Products</A>
</LI><LI><A href="/support.html"  class=menulink>Support</A>
<ul><LI><A href="/articles.html"  class=menulink>Articles</A></LI><LI><A href="/newsletters.html"  class=menulink>Newsletters</A></LI><LI><A href="/links.html"  class=menulink>Useful Links</A></LI><LI><A href="/contact.html"  class=menulink>Contact Us</A></LI></ul>
</LI>
</UL>
</DIV>

For sites with popup menus, the following javascript code will automatically be included with all CSS menus

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Here is example code for vertical menu with popout menus

#menu {
 margin-top: 10px;
 width: 120px; 
}

#menu ul {
 list-style: none;
 padding: 1px;   /* padding to buttons */
 margin: 0 ;   /* indent from outside div */
 width:120px;
}

#menu li {
 left: 0;
 margin: 0 ;
 padding: 0;
 display: block;
 position:relative;
 width: 120px;  
}

#menu a {
 text-align: center;  /* position text within li button */
 text-decoration: none; /* remove typical underline */
 font-size: 9pt;    /* menu text size */
 display: block;    /* treats layout of buttons like they're table cells rather than list items */
 width: 120px;   /* button outside dimensions */
 color: white;  /* link text colour */
 background-color: #333;
 padding:2px;   /* padding of text within button */
 margin: 1px;   /* padding of button within list item */
}

#menu a:hover {  /* override as neccesary for mouse over effects */
 color: white;
 background-color: #666;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#menu ul ul {
 display: none;   /* removes the anoying space between buttons where popupmenus exist.*/
 visibility:hidden;  /* dropdowns hidden by default, until hovered over */
 position:absolute;
 top:0;
 left:122px;
 width: 130px;  /* width of the entire dropdown */
 margin: 0;  /* relative position of the menu to the button... 0=tight on bottom.. */
 padding: 2px;
 background-color: #555; /* color of the entire dropdown */
}

#menu ul ul ul {
 position: absolute;
 top: auto;  /* auto means that it will be in the typicall indented list position below the first menu */
 left: 0;   /* 0 */
 margin: -20px 130px;       /* adjust the margins to position the 2nd level popout menu to the right*/
 width: 130px;   /* width is based on the containing block */
 background-color: #444; /* color of the entire dropdown */
}

#menu li ul a {  /* override colours for drop down buttons */
 background-color: #666;
 color:white;
 width: 130px;
 text-align:center;
 font-size: 9pt;
 border-top: 1px  solid white;
 border-left: 1px  solid white;
 border-right: 0px ;
 border-bottom: 1px  solid #000000;
 padding:2px;
 margin: 0;
}

#menu li ul a:hover {  /* override colours for drop down buttons */
 color: white;
 background-color: #999;
}

#menu ul li:hover, #menu ul li.sfhover {
 color: blue;
}

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul
{
 left: -999em;
}

#menu li:hover ul,
#menu li.sfhover ul
{
  visibility:visible;
  display: block;  /* anoyingly restores the anoying space between buttons where popupmenus exist.*/
}

#menu li li:hover ul,
#menu li li li:hover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
  visibility:visible;
  left: auto;
  display: block;  /* anoyingly restores the anoying space between buttons where popupmenus exist.*/
}