Problema com CSS (Multi Level Dropdown)

Eu numa 1ª fase, optava por pôr isso tudo a funcionar num nível mais básico, tal como no link que te mostrei. Ou seja sem imagens, efeitos e outras artimanhas, e depois de ter tudo a funcionar, então começava a acrescentar funcionalidades.

 

Vendo assim de relance o css, tens um "top" associado a todos os ul (.menu ul ul).
Os sub-menus que queres que apareçam à direita não podem ter um "top", já que vai ser sempre uma "margem" em relação ao parent.
Portanto, ou mudas o esquema de classes css que tens ou então dás uma classe extra aos sub-menus que faça o "override" do "top".
Com isto resolvido já devem aparecer à direita.
Se porventura não estiverem suficientemente à direita alinhas com uma "margin-left".

 

CSS

.menu ul ul ul ul

.menu li li li li

Não aconselho muito a usar isto, a subcategoria da subcategoria ainda mais da subcategoria da classe principal leva as seguintes propriedades de CSS;

quase mais valia dar-lhes um id próprio para não dar erro no CSS.

E falo por experiência própria sempre que faço uso e abuso das subcategorias customo dar barraca!

Cumps

 

Ora portanto, aqui fica uma possivel solução para o teu problema.

CSS

.menu{width:963px;float:left;clear:both;background :url(bg.jpg) repeat-x;margin-top:25px;}


.menu ul{float:left;}
.menu ul li{float:left;padding:0px ;width:auto;}
.menu ul li img{float:left;margin:10px 0px 0px 0px;}
.menu ul li a{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 10px 0px 5px;margin:0px;float:left;width:auto;}
.menu ul li a span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#000;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a.active span{font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;text-decoration:none;padding:0px 24px 0px 0px;margin:0px;float:left;width:auto;}
.menu ul li a span:hover, .menu li a.active{background:url(navi_hover.png) repeat-x;font:bold 13px/43px 'LucidaSansUnicodeRegular';color:#fff;}


.menu ul li a .icon1:hover,.menu li a.active span.icon1{background:url(1_hover.png) right 10px no-repeat;}
.menu ul li a .icon2:hover,.menu li a.active span.icon2{background:url(2_hover.png) right 10px no-repeat;}
.menu ul li a .icon3:hover,.menu li a.active span.icon3{background:url(3_hover.png) right 10px no-repeat;}
.menu ul li a .icon4:hover,.menu li a.active span.icon4{background:url(4_hover.png) right 10px no-repeat;}
.menu ul li a .icon5:hover,.menu li a.active span.icon5{background:url(5_hover.png) right 10px no-repeat;}
.menu ul li a .vip:hover,.menu li a.active span.vip{background:url(6_hover.png) right 10px no-repeat;}
.menu ul li a .near:hover,.menu li a.active span.near{background:url(7_hover.png) right 10px no-repeat;}


.icon1{float:left;background:url(1.png) right 10px no-repeat;}
.icon2{float:left;background:url(2.png) right 10px no-repeat;}
.icon3{float:left;background:url(3.png) right 10px no-repeat;}
.icon4{float:left;background:url(4.png) right 10px no-repeat;}
.icon5{float:left;background:url(5.png) right 10px no-repeat;}
.vip{float:left;background:url(6.png) right 10px no-repeat;}
.near{float:left;background:url(7.png) right 10px no-repeat;}


.menu ul ul{
position:absolute;
width:12em;
/*top:5.6em; Se precisares de um top para alinhar o menu coloca-o noutro elemento, possivelmente o parent do 1º ul que tens */
display:none;
float:left;
clear:both;
background:url(menu_bg.jpg);
}


.menu ul ul a{
width:12em;
float:left;
}


.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul{
display:none;
}

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


.menu ul li a:hover,.menu li a.active{background:url(navi_hover.png) repeat-x;}


.downarrow{background:url(downarrow.png) center 43px no-repeat;}


.menu li:hover div.bg_downarrow{display:block;}
.menu ul li.m_spliter{float:left;height:42px;background:url (divisor.png) right 2px no-repeat;}
.menu ul li.m_spliter:last-child{background:none;}

/* Classe para alinhar os submenus, para que não fiquem "em cima" uns dos outros */
.submenuUl {
margin-left: 6em;
}

/* O primeiro submenu é especial pois o "Vip" não tem a mesma largura dos restantes submenus */
.submenuUl_inicial{
margin-left: 20px;
}

Código HTML

<div class="menu ">
<ul>
<li class="m_spliter">
<a href="" title="" <span class="vip">Vip</span></a>

<ul class="submenuUl_inicial">
<li><a href="#">sub-menu1</a>
<ul class="submenuUl">
<li><a href="#">sub-menu1.1</a>
<ul class="submenuUl">
<li><a href="#"></a></li>
<li><a href="#">sub-menu1.1.1</a></li>
<li><a href="#">sub-menu1.1.2</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.2
<ul class="submenuUl">
<li><a href="#">sub-menu1.2.1</a></li>
<li><a href="#">sub-menu1.2.2</a></li>
<li><a href="#">sub-menu1.2.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu1.3</li>
<li><a href="#">sub-menu1.4</li>
</ul>
</li>
<li><a href="#">sub-menu2</a>
<ul class="submenuUl">
<li><a href="#">sub-menu2.1</a>
<ul class="submenuUl">
<li><a href="#">sub-menu2.1.1</a></li>
<li><a href="#">sub-menu2.1.2</a></li>
<li><a href="#">sub-menu2.1.3</a></li>
</ul>
</li>
<li><a href="#">sub-menu2.2</a>
<ul class="submenuUl">
<li><a href="#">sub-menu2.2.1</a></li>
<li><a href="#">sub-menu2.2.2</a></li>
<li><a href="#">sub-menu2.2.3</a></li>
</ul>
</li>
</li>
</ul>
<li><a href="#">sub-menu3</a></li>
</ul>

</li>

</ul>
</div>

Pareceu-me ser a solução mais simples.
Basicamente retirei o "top" do ".menu ul ul" no CSS (se precisares de um top no menu coloca-o noutro elemento que não no ul).
Criei as classes "submenuUl" e "submenuUl_inicial" para alinhar os submenus com o "margin-left".

O "submenuUl_inicial" existe porque a "raiz" do menu (Vip) não tem a mesma largura do resto do menu. Daí o 1º submenu ter uma "margin-left" diferente dos restantes.


Como conselho, digo-te para não teres medo de criares classes conforme precisares (dentro de certos limites).
No final (depois de teres tudo como precisas) dás uma vista de olhos pelo css todo e tentas condensar o código (para evitar repetição de código).