CSS - Multilevel dropdown menu

The following is my slightly different version of the so-called suckerfish menu, as implemented here. It's a basic multilevel dropdown menu made from an unordered list using CSS:

HTML

<ul class="menu">
  <li>
    <a href="">Addresses<a>
    <ul>
      <li>
        <a href="">New<a>
        <ul>
          <li>
            <a href="">Address<a>
            <a href="">Selection<a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

CSS

.right { float: right; } /* Used to have the menu on the right side. */
ul.menu,
ul.menu ul { margin: 0; padding: 0; list-style-type: none;
             list-style-position: outside; position: relative; line-height: 2em; }
  ul.menu ul { position: absolute; width: 12em; top: 2em; display: none; }
  ul.menu li { float: left; position: relative; }
  ul.menu li ul a { width: 12em; float: left; border-top: solid 1px #888; }
  ul.menu li ul ul { top: auto; left: 12em; border-left: solid 1px #888; }
  ul.menu li:hover ul ul,
  ul.menu li:hover ul ul ul,
  ul.menu li:hover ul ul ul ul { display: none; }
  ul.menu li:hover ul,
  ul.menu li li:hover ul,
  ul.menu li li li:hover ul,
  ul.menu li li li li:hover ul { display: block; z-index: 99; }
  ul.menu a:link,
  ul.menu a:active,
  ul.menu a:visited { display: block; padding: 0px 10px; border-right:
                      solid 1px #888; color: #fff; text-decoration: none; background-color: #000; }
  ul.menu a:hover { background-color: #888; }
ul.right a:link,
ul.right a:active,
ul.right a:visited { border-right: none; border-left: solid 1px #888; }