@ WeFoundEm..............Yea, looks like you got your copy right before I caught a couple of mistakes I made, and submitted a revised version.......1.3.9b.
Anyway, looks like you got the width down. Now, to make your second level hover above the rest of the menu. Add a z-index to this block of code making it look like:
#nav-cat ul {
margin: 0px 0px 0px 0px;
padding: 0;
width: 200px;
background-color: #6495ed;
z-index: 1000;
}
There........now 2nd level is above 1st level and is readable. Now, let's push it over a bit so it don't cover up so much of the 1st level. Change the margin to 200 in this section of code like this:
#nav-cat ul ul }
position: absolute;
top: 0;
left: 200px;
display: none;
}
Now, that makes it flush with the right side of the 1st level. If you want it to overlap just a little, then change that to 190, 180, or something to your liking.
Now, you wanted to change the Heading, right? You can change this block of code to include your image that I assume you're going to make to match the rest of your sideboxes:
#categoriescssHeading.leftBoxHeading {
background: #87ceeb;
border-bottom: 1px solid #0000ff;
margin-bottom: 1px;
}
to something like:
#categoriescssHeading.leftBoxHeading {
background: url(../images/yourimage.gif);
margin-bottom: 1px;
}
Of course, you'll have to play with the margin and maybe add a padding to get your desired results.
If you need any more help with this, don't hesitate to ask.