I tried to do this CSS drop down menu with 2 methods, but none of them work perfect.
The first method is this:
PHP Code:
#menu1main { /* Top drop down menu styles */
height 31px;
display block;
}

#menu1main a { /* Top drop down menu hover styles */
display block;
color #000000;
text-decoration none
border none;
background-repeat no-repeat;
}

.
menu1 .menu1list /* Hide top drop down menu submenu */
display none;
}

.
menu1, .display /* Top drop down menu top level styles */
float left;
width 110px;
text-align center;
vertical-align middle;
font-family Comic Sans MS;
font-size 10pt;
line-height 31px;}

/* Top drop down menu submenu hover styles */
a.menu1b1lv1a.menu1b1lv1:hovera.menu1b1lv1:active 
background-image url('image/menu_banner_1.jpg');
background-position 12px 50% ;
}

a.menu1b2lv1a.menu1b2lv1:hovera.menu1b2lv1:active 
background-image url('image/menu_banner_2.jpg');
background-position 12px 50% ;
}

/* Top drop down menu submenu hover styles */
a.menu1lv2a.menu1lv2:hovera.menu1lv2:active 
display block;
text-decoration none
border none;
color #000000;
text-indent 16px;
text-align left;
font-size 8pt;
line-height 20px;
width 130px;
}

a.menu1lv2:hovera.menu1lv2:active 
background-image url('image/menu_cube_1.gif');
background-position 0100% ;
background-repeat no-repeat;
}

a.menu1lv2:hovera.menu1lv2:activea.menu1b1lv1:hovera.menu1b1lv1:activea.menu1b2lv1:hovera.menu1b2lv1:active 
font-weight bold;

The HTML for this is:
Code:
<div id="menu1main">

<div class="menu1" 
  onmouseover="this.className='display'"
    onmouseout="this.className='menu1'">
        <a class="menu1b1lv1" href="">Intro</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Title</a>
        <a class="menu1lv2" href="">Part 2 Title</a>
        <a class="menu1lv2" href="">Part 3 Title</a>
        </div></div>
<div class="menu1" 
  onmouseover="this.className='display'"
	  onmouseout="this.className='menu1'">
        <a class="menu1b2lv1" href="">Chapter 1</a>
        <div class="menu1list">
        <a class="menu1lv2" href="">Part 1 Long Title</a>
        <a class="menu1lv2" href="">Part 2 Long Title</a>
        <a class="menu1lv2" href="">Part 3 Long Title</a>
        </div></div>
</div>
The problem with this version is I can't change the width of the submenu, or else the second Chapter title will float to the right. So I tried the second method:
PHP Code:
ul.top /* Top drop down menu styles */
    
display block;
    
padding 0;
    
margin 0;
    
border none;
    
font-family Comic Sans MS;
    
font-size 10pt;
    
text-align center;
    
vertical-align middle;
}

#topnav li.topnav0 { /* Top drop down top level menu styles */
    
position relative;
    
float left;
    
background-image url('image/menu_banner_1.jpg');
    
background-position 500% ;
    
background-repeat no-repeat;
    
width 110px;
    
line-height 31px;
}

#topnav li.topnav0 a { /* Top level link styles */
    
color #000000;
    
text-decoration none;
}
     
li.topnav0 a:hover /* Top level hover styles */
    
text-decoration none;
    
font-weight bold;
}
     
#topnav ul.topnav1 a:hover { /* Drop down hover styles */
    
text-decoration none;
    
background-image url('image/menu_cube_1.gif');
    
background-position 0 50% ;
    
background-repeat no-repeat;
}

li.topnav0 ul.topnav1 {/* Drop down box style */ 
    
display none;
    
background #FFFFFF;
    
padding 0;
    
margin 0;
    
position absolute;
    
top 100%;
    
left 0;
}

#topnav ul.topnav1 a { /* Drop Down Submenu Item Styles */
    
display block;
    
padding 0;
    
margin 0;
    
text-indent 16px;
    
text-align left;
    
font-size 8pt;
    
line-height 20px;
    
width 250px;
}

#topnav li.topnav0:hover ul.topnav1, li.over ul.topnav1, li.over li.topnav1 { /* Makes Drop down work in IE */
    
display block;

And the HTML is as follow:
Code:
<div>
	     <ul class="top" id="topnav">
               <li class="topnav0"><div><a href="#">Home</a></div>
               </li>
               <li class="topnav0"><div><a href="#">Intro</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Title</a></li>
                         <li><a href="#">Part 2 Title</a></li>
                         <li><a href="#">Part 3 Title</a></li>
                    </ul>
               </li>               <li class="topnav0"><div><a href="#">Chapter 1</a></div>
                    <ul class="topnav1">
                         <li><a href="#">Part 1 Long Title</a></li>
                         <li><a href="#">Part 2 Long Title</a></li>
                         <li><a href="#">Part 3 Long Title</a></li>
                    </ul>
               </li>
          </ul>
</div>
The problem with this version is that I cannot change the background image for each Chapter on the top level. Also, I cannot make the background of the drop down submenu transparent. If I make it transparent or delete the background line, the Part 2 link will not show up.

Any help of making either method to work is great appreciated! Thank you very much!