Suckerfish menu <old school>

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <ul id="tabs">
     <li><a href="/category/binaries/">Binaries</a>
      <ul class="children">
           <li><a href="/category/binaries/usenet/">Usenet</a></li>
      </ul>
     </li>
     <li><a href="/category/blacklisted/">Blacklisted</a>
      <ul class="children">
           <li><a href="/category/blacklisted/blhost/">Hosting</a></li>
      </ul>
     </li>
      <li><a href="/category/blogging/">Blogging</a>
      <ul class="children">
           <li><a href="/category/blogging/plug-ins/">Plug-ins</a></li>
           <li><a href="/category/blogging/blogtut/">Tutorials</a></li>
           <li><a href="/category/blogging/upgrades/">Upgrades</a></li>
      </ul>
     </li>
    </ul>
  </body>

</html>

$(function() {
    if ($.browser.msie && parseInt($.browser.version)< 7) {
        $("#tabs li").hover(
            function() {
                $(this).addClass("sf");
            },
            function() {
        $(this).removeClass("sf");
            });
    }
});

#tabs {
    background:transparent url(images/fade_grey_tab.gif) repeat-x scroll center bottom;
    margin:0;
    padding:0;
}
#tabs ul {
    display:block;
    position:absolute;
}
#tabs ul.children {
    margin:0;
    padding:0;
    border-top:1px solid #FCD290;
    z-index:100;
    visibility:hidden;
}
#tabs li {
    background:#969696 url(images/bg_grey_tab.gif) no-repeat scroll left top;
    display:inline;
    float:left;
    height:auto;
}
#tabs li li {
    background:#FFF0CE none repeat scroll 0%;
    display:block;
    float:none;
}
#tabs a {
    text-decoration:none;
    background:transparent url(images/bg_grey_tab.gif) no-repeat scroll left top;
    border-right:1px solid #A2A2A2;
    color:#FFFFFF;
    display:block;
    font-weight:bold;
    line-height:20px;
    text-align:center;
    width:115px;
}
#tabs a:hover, #tabs a.selected {
    background:#FCDA2E url(images/bg_orange_tab.gif) no-repeat scroll left top;
    color:#FFFFFF;
    text-decoration:none;
}
#tabs ul a {
    background:#FFF0CE none repeat scroll 0%;
    border-bottom:1px solid #FCD290;
    border-left:1px solid #FCD290;
    border-right:1px solid #FCD290;
    color:#666666;
    line-height:20px;
    width:115px;
}
#tabs ul ul a {
    background:#FFF9EA none repeat scroll 0%;
}
#tabs ul a:hover, #tabs ul a.selected {
    background:transparent url(images/bg_orange_tab.gif) no-repeat scroll left bottom;
}
#tabs li:hover ul, #tabs li.sf ul {
    visibility:visible;
}
#tabs li:hover ul ul, #tabs li.sf ul ul {
    visibility:hidden;
}
#tabs li:hover ul, #tabs li li:hover ul, #tabs li.sf ul, #tabs li li.sf ul {
    visibility:visible;
}

Old suckerfish menu using jQuery