CSS-rollover menu

Voor mijn website maak ik gebruik van een CSS rollover menuutje. Hierin zit een kleine Javascript-code zodat dit menu in vrijwel alle browsers werkt. Op het moment ziet dit er als volgt uit:

HTML:

<ul>
   <li>Button 1</li>
   <li onMouseOver="this.className='msieFix'" onMouseOut="this.className=''">Button 2
      <ul>
      <li>Subbutton 1</li>
      <li>Subbutton 2</li>
      </ul>
   </li>
</ul>

CSS:

	#menu {
		position: absolute;
		height: 60px;		
		margin-left: 40px;
		z-index: 2;
	}
	
		#menu ul {
			margin: 0px;
			padding: 0px;
		}
		
		#menu ul li {
			position: relative;
			display: inline;
			float: left;
		}
				
		#menu a {
			display: block;
			padding: 4px 10px;
			float: left;
			border-right: 1px solid #FFFFFF;
			border-left: 1px solid #000000;
			margin-left:0px;
			font-weight: bold;
			color: #FFFFFF;
			text-decoration: none;
			letter-spacing: 2px;
		}
		
		#menu a:hover {
			color: #FFCC00;
			text-decoration: underline;
		}
		
			#menu ul li ul {
				position: absolute;
				top: 27px;
				left: 0px;
				margin: 0px;
				padding: 0px;
				display: none;
				border-left: 1px solid #000000;
				border-bottom: 1px solid #000000;
			}
			
			#menu ul li ul li {
				display: list-item;
				float: none;
				margin-top: -1px;
			}
			
			#menu ul li ul li a {
				background-color: #FFCC00;
				width: 170px;
				height: 20px;
				margin: 0px;
				padding: 2px 10px 0px 10px;
				color: black;
				border-left: 0px;
				border-top: 1px solid #FFFFFF;
				font-weight: normal;
				font-size: 14px;
			}
			
			#menu ul li ul li a:hover {
				background-color: #0000FF;
				text-decoration: none;
				color: #FFFFFF;
			}

			#menu li:hover ul, #menu li.msieFix ul {
				display: block;
			}
			
			#menu li:hover ul li, #menu li.msieFix ul li {
				display: block;
			}

Dit menu werkt echt perfect! Alleen wat ik nu probeer, maar wat ik niet voor elkaar krijg, is het toevoegen van nog extra subbuttons, dus eigenlijk Sub-subbuttons. Wanneer ik binnen een <li> van het submenuutje een nieuwe <ul></ul> Met hierin <li></li>-tags aanmaak dan gebeurt er helemaal niets. Ook niet als ik de regel onMouseOver="this.className='msieFix'" onMouseOut="this.className=''" toevoeg....
Heeft iemand misschien enig idee hoe dit komt en hoe dit eventueel op te lossen is? Alvast bedankt!