Проблема с отображением третьего уровня выпадающего меню

Здравствуйте! На сайте установлено следующее CSS-меню. Раньше оно использовалось как двухуровневое: основной раздел и выпадающий список подразделов. Сейчас понадобилось чтобы в выпадающем списке отображался третий уровень. Необходимо сделать чтобы пункты меню третьего уровня позиционировались справа от родительского пункта второго уровня меню, но мне не удается этого сделать.

/* Top menu items */

#menu ul {

   margin:0;

   padding:0;

   list-style:none;

   float:right;

   position:relative;

   right:50%;

}

#menu ul li {

   margin:0 0 0 1px;

	padding: 0 2px 0 2px;

   float:left;

   position:relative;

   left:50%;

   top:5px;

}

#menu ul li a {

   display:block;

   margin:0;

   padding:.6em .5em .4em;

   font-size:1em;

   line-height:1em;

   text-decoration:none;

   color:#fff;

   font-weight:bold;

}

#menu ul li.active a {

   color:#fff;

   background:#000;

}

#menu ul li a:hover {

   background:#00d2f3; /* Top menu items background colour */

   color:#fff;

}

#menu ul li:hover a,

#menu ul li.hover a { /* This line is required for IE 6 and below */

   background:#00d2f3; /* Top menu items background colour */

   color:#fff;

}

/* Submenu items */

#menu ul ul {

   display:none; /* Sub menus are hiden by default */

   position:absolute;

   top:2em;

   left:0;

   right:auto; /*resets the right:50% on the parent ul */

   width:auto; /* width of the drop-down menus */

}

#menu ul ul li {

   left:auto;  /*resets the left:50% on the parent li */

   margin:0; /* Reset the 1px margin from the top menu */

   clear:left;

   width:100%;

}

#menu ul ul li a,

#menu ul li.active li a,

#menu ul li:hover ul li a,

#menu ul li.hover ul li a { /* This line is required for IE 6 and below */

	font-weight:bold; /* resets the bold set for the top level menu items */

	background-color:#005f8f;

	color:#fff;

	line-height:1.4em; /* overwrite line-height value from top menu */

	margin-bottom: 1px;

	text-align: left;

	white-space: nowrap;

}

#menu ul ul li a:hover,

#menu ul li.active ul li a:hover,

#menu ul li:hover ul li a:hover,

#menu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */

	background-color:#00d2f3; /* Sub menu items background colour */

	color:#fff;

}

/* Flip the last submenu so it stays within the page */

#menu ul ul.last {

   left:auto; /* reset left:0; value */

   right:0; /* Set right value instead */

}

/* Make the sub menus appear on hover */

#menu ul li:hover ul,

#menu ul li.hover ul { /* This line is required for IE 6 and below */

   display:block; /* Show the sub menus */

}