Ok, I have a menu, that when I hover over it... it expands to reveal sublinks.
Easy enough....
The trick is to get the first "category name" of each to become a hyperlink... (I've tried changing the first category directly as a link, but it didn't work using an "a href")

I threw in all the code (including the CSS), in case some of you wan to use it for your own site, but most importantly, so you can see what I'm dealing with and where I'm going wrong.

(also, if you see below... I've even attached a couple of scripts that I've tried, but to no success...)

                        <script type="text/javascript">
                        // Node Functions
                            if(!window.Node){
                              var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
                            }

                            function checkNode(node, filter){
                              return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
                            }

                            function getChildren(node, filter){
                              var result = new Array();
                              var children = node.childNodes;
                              for(var i = 0; i < children.length; i++){
                                if(checkNode(children[i], filter)) result[result.length] = children[i];
                              }
                              return result;
                            }

                            function getChildrenByElement(node){
                              return getChildren(node, "ELEMENT_NODE");
                            }

                            function getFirstChild(node, filter){
                              var child;
                              var children = node.childNodes;
                              for(var i = 0; i < children.length; i++){
                                child = children[i];
                                if(checkNode(child, filter)) return child;
                              }
                              return null;
                            }

                            function getFirstChildByText(node){
                              return getFirstChild(node, "TEXT_NODE");
                            }

                            function getNextSibling(node, filter){
                              for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
                                if(checkNode(sibling, filter)) return sibling;
                              }
                              return null;
                            }
                            function getNextSiblingByElement(node){
                                    return getNextSibling(node, "ELEMENT_NODE");
                            }

                            // Menu Functions & Properties

                            var activeMenu = null;

                            function showMenu() {
                              if(activeMenu){
                                activeMenu.className = "";
                                getNextSiblingByElement(activeMenu).style.display = "none";
                              }
                              if(this == activeMenu){
                                activeMenu = null;
                              } else {
                                this.className = "active";
                                getNextSiblingByElement(this).style.display = "block";
                                activeMenu = this;
                              }
                              return false;
                            }

                            function initMenu(){
                              var menus, menu, text, a, i;
                              menus = getChildrenByElement(document.getElementById("menu"));
                              for(i = 0; i < menus.length; i++){
                                menu = menus[i];
                                text = getFirstChildByText(menu);
                                a = document.createElement("a");
                                menu.replaceChild(a, text);
                                a.appendChild(text);
                                a.href = "#";
                                a.onmouseover = showMenu;
                                a.onfocus = function(){this.blur()};
                              }
                            }

                            if(document.createElement) window.onload = initMenu;
                            
                        </script>

                        <ul id="menu" style="padding-left:20px;margin-top:9px;width:150px;">
                          <li style="font-size: 10pt;">Category 1
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="Link1URL">&raquo;</span> Link 1.1</a></li>
                                <li style="font-size: 8pt;"><a href="Link2URL"><span style="font-weight:lighter">&raquo;</span> Link 1.2</a></li>
                                <li style="font-size: 8pt;"><a href="Link3URL"><span style="font-weight:lighter">&raquo;</span> Link 1.3</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">Category 2
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="Link1URL"><span style="font-weight:lighter">&raquo;</span> Link 2.1</a></li>
                                <li style="font-size: 8pt;"><a href="Link2URL"><span style="font-weight:lighter">&raquo;</span> Link 2.2</a></li>
                                <li style="font-size: 8pt;"><a href="Link3URL"><span style="font-weight:lighter">&raquo;</span> Link 2.3</a></li>
                                <li style="font-size: 8pt;"><a href="Link4URL"><span style="font-weight:lighter">&raquo;</span> Link 2.4</a></li>
                                <li style="font-size: 8pt;"><a href="Link5URL"><span style="font-weight:lighter">&raquo;</span> Link 2.5</a></li>
                                <li style="font-size: 8pt;"><a href="Link6URL"><span style="font-weight:lighter">&raquo;</span> Link 2.6</a></li>
                                <li style="font-size: 8pt;"><a href="Link7URL"><span style="font-weight:lighter">&raquo;</span> Link 2.7</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">Category 3
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="Link1URL"><span style="font-weight:lighter">&raquo;</span> Link 3.1</a></li>
                                <li style="font-size: 8pt;"><a href="Link2URL"><span style="font-weight:lighter">&raquo;</span> Link 3.2</a></li>
                                <li style="font-size: 8pt;"><a href="Link3URL"><span style="font-weight:lighter">&raquo;</span> Link 3.3</a></li>
                                <li style="font-size: 8pt;"><a href="Link4URL"><span style="font-weight:lighter">&raquo;</span> Link 3.4</a></li>
                                <li style="font-size: 8pt;"><a href="Link5URL"><span style="font-weight:lighter">&raquo;</span> Link 3.5</a></li>
                                <li style="font-size: 8pt;"><a href="Link6URL"><span style="font-weight:lighter">&raquo;</span> Link 3.6</a></li>
                                <li style="font-size: 8pt;"><a href="Link7URL"><span style="font-weight:lighter">&raquo;</span> Link 3.7</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">Category 4
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="Link1URL"><span style="font-weight:lighter">&raquo;</span> Link 4.1</a></li>
                                <li style="font-size: 8pt;"><a href="Link2URL"><span style="font-weight:lighter">&raquo;</span> Link 4.2</a></li>
                            </ol>
                          </li>
                          <li style="font-size: 10pt;">Category 5
                            <ol style="padding-left:15px;">
                                <li style="font-size: 8pt;"><a href="Link1URL"><span style="font-weight:lighter">&raquo;</span> Link 5.1</a></li>
                                <li style="font-size: 8pt;"><a href="Link2URL"><span style="font-weight:lighter">&raquo;</span> Link 5.2</a></li>
                                <li style="font-size: 8pt;"><a href="Link3URL"><span style="font-weight:lighter">&raquo;</span> Link 5.3</a></li>
                                <li style="font-size: 8pt;"><a href="Link4URL"><span style="font-weight:lighter">&raquo;</span> Link 5.4</a></li>
                                <li style="font-size: 8pt;"><a href="Link5URL"><span style="font-weight:lighter">&raquo;</span> Link 5.5</a></li>
                            </ol>
                          </li>
                        </ul>
                    </div>

<style type="text/css">
/*
--------------
**Menu Style**
--------------
*/

ul#menu {
  width: 100px;
  list-style-type:none;
  border-bottom: solid 1px silver;
  margin: 0;
  padding: 0px;
}

ul#menu ol 
{
  color:#000000;
  display: none;
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li, ul#menu a 
{
  list-style-type:none;
  color: #000000;
}

ul#menu li 
{
  list-style-type:none;
  line-height: 22px;
}

ul#menu ol li 
{
  line-height:14px;
  list-style-type:none;
  border-bottom: none;
  color:#000000;
}

ul#menu ol li:before 
{
    color:#000000;
    list-style-type:none;
}

ul#menu a 
{
  list-style-type:none;
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #64a4fa;
}
ul#menu a.active {
  color: #be5028;
}

Javascript Samples of what I've tried:

                                switch(a)
                                {
                                case a = "Category 1":
                                    a.href = "http://url-Link";
                                  //  break;
                                case a = "Category 2":
                                    a.href = "http://url-Link";
                                  //  break;
                                case li = "Category 3":
                                    a.href = "http://url-Link";
                                  //  break;
                                case a = "Category 4":
                                    a.href = "http://url-Link";
                                   // break;
                                case a = "Category 5":
                                    a.href = "http://url-Link";
                                    //break;
                                }

                                if(a = "Category 1")
                                    {a.href = "http://url-Link"}
                                if(a = "Category 2")
                                    {a.href = "http://url-Link"}
                                if(a = "Category 3")
                                    {a.href = "http://url-Link"}
                                if(a = "Category 4")
                                    {a.href = "http://url-Link"}
                                if(a = "Category 5")
                                    {a.href = "http://url-Link"}

All you should need to do to make the category a link is wrap an <a> tag around it. That will likely necessitate some changes to your css as well, but there really isn't anything more to turning the category into a link.

Is your page online somewhere so we can take a look? I'm not sure which of the scripts your using above so would rather not spend time debugging code you may not be using.

I've been using the Suckerfish menu for awhile now to create dropdowns and it's worked well for me.

I've tried the <a> wrap, and it doesn't work, in fact, the menu itself, doesn't function with it.

Is your page online somewhere so we can take a look? I'm not sure which of the scripts your using above so would rather not spend time debugging code you may not be using.

I can't post a link to the site because it's not up and running, yet and it's only on a development server at this time.

Do me a favor.... Copy this whole thing (simplified) to a blank html document, save it and open it in your browser... then, you can see what it does...

<html>
<head>
<title>Temp Possibility</title>
<style type="text/css">

ul#menu {
  width: 100px;
  list-style-type: none;
  border-top: solid 1px #b9a894;
  margin: 0;
  padding: 0;
}

ul#menu ol {
  display: none;
  text-align: right;
  list-style-type: none;
  margin: 0;
  padding: 5px;
}

ul#menu li, 
  ul#menu a {
  font-family: verdana, sans-serif;
  font-size: 11px;
  color: #785a3c;
}

ul#menu li {
  border-bottom: solid 1px #b9a894;
  line-height: 15px;
}

ul#menu ol li {
  border-bottom: none;
}

ul#menu ol li:before {
  content: "- ";
}

ul#menu a {
  text-decoration: none;
  outline: none;
}

ul#menu a:hover {
  color: #539dbc;
}

ul#menu a.active {
  color: #be5028;
}

</style>
</head>

<body>

<div>
<script type="text/javascript">
// Node Functions

if(!window.Node){
  var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
  return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}

function getChildren(node, filter){
  var result = new Array();
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    if(checkNode(children[i], filter)) result[result.length] = children[i];
  }
  return result;
}

function getChildrenByElement(node){
  return getChildren(node, "ELEMENT_NODE");
}

function getFirstChild(node, filter){
  var child;
  var children = node.childNodes;
  for(var i = 0; i < children.length; i++){
    child = children[i];
    if(checkNode(child, filter)) return child;
  }
  return null;
}

function getFirstChildByText(node){
  return getFirstChild(node, "TEXT_NODE");
}

function getNextSibling(node, filter){
  for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
    if(checkNode(sibling, filter)) return sibling;
  }
  return null;
}
function getNextSiblingByElement(node){
        return getNextSibling(node, "ELEMENT_NODE");
}

// Menu Functions & Properties

var activeMenu = null;

function showMenu() {
  if(activeMenu){
    activeMenu.className = "";
    getNextSiblingByElement(activeMenu).style.display = "none";
  }
  if(this == activeMenu){
    activeMenu = null;
  } else {
    this.className = "active";
    getNextSiblingByElement(this).style.display = "block";
    activeMenu = this;
  }
  return false;
}

function initMenu(){
  var menus, menu, text, a, i;
  menus = getChildrenByElement(document.getElementById("menu"));
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onmouseover = showMenu;
    a.onfocus = function(){this.blur()};
  }
}

if(document.createElement) window.onload = initMenu;
</script>

<ul id="menu">
  <li>Menu Item 1
    <ol>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
    </ol>
  </li>
  <li>Menu Item 2
    <ol>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="#">Sub Item 2.3</a></li>
    </ol>
  </li>
  <li>Menu Item 3
    <ol>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="#">Sub Item 3.2</a></li>
      <li><a href="#">Sub Item 3.3</a></li>
    </ol>
  </li>
  <li>Menu Item 4
    <ol>
      <li><a href="#">Sub Item 4.1</a></li>
      <li><a href="#">Sub Item 4.2</a></li>
      <li><a href="#">Sub Item 4.3</a></li>
    </ol>
  </li>
  <li>Menu Item 5
    <ol>
      <li><a href="#">Sub Item 5.1</a></li>
      <li><a href="#">Sub Item 5.2</a></li>
      <li><a href="#">Sub Item 5.3</a></li>
    </ol>
  </li>
</ul>
</div>

</body>
</html>

For what I'm doing, it seems to work, if I can just get the first category name to link...
How well does the suckerfish menu work... can you show me a working model? The paged you linked to didn't have one.

Sorry I've been gone a few days. Have you gotten this working?

The suckerfish tutorial has some links to demos in it. It's more of a typical dropdown menu, though. Looks like you're wanting an accordion menu so suckerfish may not work for you.