2 level css navigation menu - changed to div, now not working

I have the following complete page working as is, (first example below) but I wanted to change the css to #sideNav because I have other ul and li where they do not work  now


the below works -example 1 - uses  <ul id="nav">
page 1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
      startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
      
      </script>
<style type="text/css">

#sideMenu  {
      background: #D6DEE4; width: 166px;
      margin            : 15px 0px 0px 0px;
 }
ul
{
  margin   : 0;
  padding  : 0;
  list-style  : none;
  width   : 166px; /* Width of Menu Items */
  background  : #D6DEE4;
  border-bottom : 1px solid #DDDDE3;
}
ul li
{
  position  : relative;
}
 
li ul
{
  position  : absolute;
  left   : 165px; /* Set 1px less than menu width */
  top   : 0;
  display  : none;
 }
/* Styles for Menu Items */
ul li a
{
  display  : block;
  text-decoration: none;
  color   : #777;
  background  : #fff; /* IE6 Bug */
  text-transform : uppercase;
  padding  : 8px;
  border   : 2px solid #fff;
  border-bottom : 0;
  font-weight : bolder;
  font-size  : 11px;
  font-family : Arial, Helvetica, sans-serif;
 }
 
li a:link,  li a:visited
{
   background-color : #CBD6E5;
   border-left  : 0px solid #17415F;
   color    :  #333366;
}
li a:hover, li a:active
{
 border-left   : 0px solid #B7D31A;
 background-color : #17415F;
 color    : #fff;
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li  { float: left; height: 1%; }
* html ul li a  { height: 1%; }  /* End */
ul li a:hover  { color: #fff; background: #BAC5D4; } /* Hover Styles */
li ul li a   { padding: 5px 0px 5px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>
<body>
<div id="sideMenu">
  <ul id="nav">
    <li><a href=" " title="Home">Home</a></li>
    <li><a href="#">Manage</a>
      <ul>
        <li><a href="#">Enrol</a></li>
        <li><a href="#">Subject Profile</a>
        <li><a href="#">Update Profile</a>
      </ul>
    </li>
    <li><a href=" " class="arrow">Search</a>
      <ul>
        <li><a href="#">Search</a>
      </ul>
    </li>
    <li><a href="#" class="arrow" >Users</a>
      <ul>
        <li><a href="#">Enrol</a></li>
        <li><a href="#">View User</a>
        <li><a href="#">Update User</a>
      </ul>
    </li>
    <li><a href="#" class="arrow" >Administration</a>
      <ul>
        <li><a href="Configuration" >Configuration</a></li>
        <li><a href="Information" >View Audit</a>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

------------------------------------
the below does not work  -example 2 - uses  <div id="sideNav"><ul>

with this way then second level navs do not work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
      startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("sideNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
      
      </script>
<style type="text/css">

#sideNav ul
{
  margin   : 0;
  padding  : 0;
  list-style  : none;
  width   : 166px; /* Width of Menu Items */
  background  : #D6DEE4;
  border-bottom : 1px solid #DDDDE3;
}
#sideNav ul li
{
  position  : relative;
}
 
#sideNav li ul
{
  position  : absolute;
  left   : 165px; /* Set 1px less than menu width */
  top   : 0;
  display  : none;
 }
/* Styles for Menu Items */
 #sideNav ul li a
{
  display  : block;
  text-decoration: none;
  color   : #777;
  background  : #fff; /* IE6 Bug */
  text-transform : uppercase;
  padding  : 8px;
  border   : 2px solid #fff;
  border-bottom : 0;
  font-weight : bolder;
  font-size  : 11px;
  font-family : Arial, Helvetica, sans-serif;
 }
 
#sideNav li a:link,  #sideNav li a:visited
{
   background-color : #CBD6E5;
   border-left  : 0px solid #17415F;
   color    :  #333366;
}
#sideNav li a:hover, #sideNav li a:active
{
 border-left   : 0px solid #B7D31A;
 background-color : #17415F;
 color    : #fff;
}
 
/* Fix IE. Hide from IE Mac \*/
* html ul li  { float: left; height: 1%; }
* html ul li a  { height: 1%; }  /* End */
#sideNav ul li a:hover  { color: #fff; background: #BAC5D4; } /* Hover Styles */
#sideNav li ul li a   { padding: 5px 0px 5px 5px; } /* Sub Menu Styles */
#sideNav  li:hover ul, #sideNav li.over ul { display: block; } /* The magic */
</style>
</head>
<body>
<div id="sideNav">
<ul>
    <li><a href=" " title="Home">Home</a></li>
    <li><a href="#">Manage</a>
      <ul>
        <li><a href="#">Enrol</a></li>
        <li><a href="#">Subject Profile</a>
        <li><a href="#">Update Profile</a>
      </ul>
    </li>
    <li><a href=" " class="arrow">Search</a>
      <ul>
        <li><a href="#">Search</a>
      </ul>
    </li>
    <li><a href="#" class="arrow" >Users</a>
      <ul>
        <li><a href="#">Enrol</a></li>
        <li><a href="#">View User</a>
        <li><a href="#">Update User</a>
      </ul>
    </li>
    <li><a href="#" class="arrow" >Administration</a>
      <ul>
        <li><a href="Configuration" >Configuration</a></li>
        <li><a href="Information" >View Audit</a>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

sahromAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eternal_StudentCommented:
You should have a look at the vertical menu on this page ...


http://www.csscreator.com/menu/multimenu.php


sahromAuthor Commented:
thank you very much for that url, i have not seen it before

try as i might I was not able to get exactly what I needed

on that page he has a example of a Vertical Menu half way down.  That is what I am looking for, but when I tried to do that it does not work like it does on his page, even though I used what he had

can that be dupliicated -
sahromAuthor Commented:


I tried a couple more times - both ways, the vertical keeps producing horizontal instead of vertical
GoofyDawgCommented:
This link provides examples for both vertical and horizontal menus: http://www.projectseven.com/tutorials/css/uberlinks/

One thing that I saw in your code though is that you're using absolute positioning. Don't. Display block is enough to create the menu just fine. Use padding-left to create left-hand whitespace. In any case, mess around with the examples at the URL I provided.

GoofyDawg

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.