This is the CSS I'm currently using to produce a horizontal menu. Does anyone have any suggestions on how to go about extending it to allow for submenus?

/* CSS Document */
.rhm1{
    width:780px;
    height:64px;
    margin:0 auto;
    background:url(images/rhm1_bg.gif) repeat-x;        
}
.rhm1-left{
    background:url(images/rhm1_l.gif) no-repeat;
    width:15px;
    height:64px;
    float:left;
}
.rhm1-right{
    background:url(images/rhm1_r.gif) no-repeat;
    width:15px;
    height:64px;
    float:right;
}
.rhm1-bg{
    background:url(images/rhm1_bg.gif) repeat-x;
    height:64px;
}
.rhm1-bg ul{
    list-style:none;
    margin:0 auto;
}
.rhm1-bg li{
    float:left;
    list-style:none;
}
.rhm1-bg li a{
    float:left;
    display:block;
    color:#ffe8cc;
    text-decoration:none;
    font:12px 'Lucida Sans', sans-serif;
    font-weight:bold;
    padding:0 0 0 18px;
    height:64px;
    line-height:40px;
    text-align:center;
    cursor:pointer; 
}
.rhm1-bg li a span{
    float:left;
    display:block;
    padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
    color:#fff;
    background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
    color:#fff;
    background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
    color:#fff;
    background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
    color:#fff;
    background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}