logo

Pure CSS Menus

If you're viewing this site with any Gecko-based browser (Mozilla, Netscape 7, Safari, or Camino), you're already seeing the awesome power of CSS in the form of the drop-down submenus on the navigation bar. These are pure CSS menus -- no JavaScript -- thanks to the research started by Eric Meyer and Porter Glendenning.

The drop-down menu code uses the ability of browsers that correctly implement the :hover pseudo-class, allowing developers to apply it to more than just anchor tags. Internet Explorer does not yet understand that; hence, the need for the redundant sub-navigation on the right side of the menu bar.

This method is nicer than using the more common JavaScript as it loads much faster due to its lighter file size. It's also more accesssible: non-graphical browsers aren't JavaScript enabled and the navigation would be be useless. Lynx and others display this CSS styled menu as the unordered lists they are.

Here is a screenshot of the correct implementation:

CSS dropdown menu screenshot

The HTML behind it:

Note that the actual code has neither line breaks nor indents, as they seems to create odd, unsightly gaps between the links.

<ul>
<li class="first">
<a href="/sb/pages/company.shtml" title="services | process | people" accesskey="c">COMPANY</a>
<!-- company sub-menu -->
<ul class="company">
<li class="first"><a href="/sb/pages/co/services.shtml" accesskey="s">services</a></li>
<li><a href="/sb/pages/co/people.shtml" accesskey="u">people</a></li>
</ul>
</li>

<li>
<a href="/sb/pages/work.shtml" title="web design | applications" accesskey="w">WORK</a>
<!-- work sub-menu -->
<ul class="work">
<li class="first"><a href="/sb/pages/work/wd.shtml" accesskey="d">design</a></li>
<li><a href="/sb/pages/work/apps.shtml" accesskey="a">applications</a></li>
</ul>
</li>

<li>
<a href="/sb/pages/connect.shtml" title="contact | clients" accesskey="t">CONNECT</a>
<!-- connect sub-menu -->
<ul class="connect">
<li class="first"><a href="/sb/pages/connect/contact.shtml" accesskey="e">contact</a></li>
<li><a href="/sb/pages/connect/clients.shtml" accesskey="y">client log-in</a></li>
</ul>
</li>

<li class="last">
<a href="/sb/pages/lounge.shtml" title="word | play" accesskey="l">LOUNGE</a>
<!-- lounge sub-menu -->
<ul class="lounge">
<li class="first"><a href="/sb/pages/lounge/word.shtml" accesskey="b">word</a></li>
<li><a href="/sb/pages/lounge/lab.shtml" accesskey="x">lab</a></li>
</ul>
</li>
</ul>

The CSS mojo:

#menu ul {
margin: 0px;
padding: 0px;
display: inline;
list-style: none; }

#menu ul li {
margin: 0px;
padding: 0px;
border-left: 1px dotted #666;
list-style: none;
display: inline;
color: #000;
background-color: transparent; }

#menu li.first {
border-left: none; }

#menu li.last {
border-right: 1px solid #000000; }

#menu li a {
padding: 0px 10px 0px 10px;
font-weight: bold;
color: #1a2186;
background-color: transparent;
text-decoration: none;
font-size: 13px;
width: auto; }

#menu li a:hover {
padding: 0px 8px 0px 8px;
color: #b9d7fb;
background-color: #1a2186;
border-left: 2px solid #84acdb;
border-right: 2px solid #84acdb; }

#menu ul li:hover ul {
display: inline; }

#menu ul li ul {
margin: 0px;
display: none;
background: url(/sb/graphics/sb-bg-aqua.jpg);
border: 1px #000 solid; }

#menu ul.company {
position: absolute;
left:40px;
top:20px; }

#menu ul.work {
position: absolute;
left:89px;
top:20px; }

#menu ul.connect {
position: absolute;
left:147px;
top:20px; }

#menu ul.lounge {
position: absolute;
left:236px;
top:20px; }

#menu ul li ul li {
border-left: 1px dotted #666; }

#menu ul li ul li a {
margin: 0px;
padding: 0px 8px 0px 8px;
width: auto;
color: #1a2186;
background-color: transparent;
text-decoration: none;
font-size: small; }

#menu ul li ul li a:hover {
padding: 0px 6px 0px 6px; }