Ayuda con menú Desplegable!

[ZedGe]

Estoy desarrollando una web en joomla 2.5, y tengo un modulo en html, que es el menu que esta a la derecha en la pagina http://puntografica3.net46.net/index.php/homepage#

El problema es que al poner sub menus, se despliega hacia la derecha, se puede hacer que abra para el otro lado??

Pongo los codigos por si las dudas

Este va en el head del index.php:

Código [Seleccionar] Expandir

<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">

Codigo HTML del menu

Código [Seleccionar] Expandir

<div id='cssmenu'>
<ul>
  <li class='active'><a href='index.html'><span>Home</span></a></li>
  <li class='has-sub'><a href='#'><span>Products</span></a>
     <ul>
        <li class='has-sub'><a href='#'><span>Product 1</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
        <li class='has-sub'><a href='#'><span>Product 2</span></a>
           <ul>
              <li><a href='#'><span>Sub Item</span></a></li>
              <li class='last'><a href='#'><span>Sub Item</span></a></li>
           </ul>
        </li>
     </ul>
  </li>
  <li><a href='#'><span>About</span></a></li>
  <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>


El css

Código [Seleccionar] Expandir

/* Some stylesheet reset */
#cssmenu  > ul {
list-style: none;
margin: 0;
padding: 0;
vertical-align: baseline;
line-height: 1;
}

/* The container */
#cssmenu  > ul {
display: block;
position: relative;
width: 150px;
}

/* The list elements which contain the links */
#cssmenu  > ul li {
display: block;
position: relative;
margin: 0;
padding: 0;
width: 150px;
}

/* General link styling */
#cssmenu  > ul li a {
/* Layout */
display: block;
position: relative;
margin: 0;
border-top: 1px dotted #3a3a3a;
border-bottom: 1px dotted #1b1b1b;
padding: 11px 20px;
width: 110px;

/* Typography */
font-family: Helvetica, Arial, sans-serif;
color: #d8d8d8;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 1px 1px #000;
font-size: 13px;
font-weight: 300;

/* Background & effects */
background: #282828;
}

/* Rounded corners for the first link of the menu/submenus */
#cssmenu  > ul li:first-child>a {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 0;
}

/* Rounded corners for the last link of the menu/submenus */
#cssmenu  > ul li:last-child>a {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0;
}


/* The hover state of the menu/submenu links */
#cssmenu  > ul li>a:hover, #cssmenu  > ul li:hover>a {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
background: #54cdf1;
background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
border-color: transparent;
}

/* The arrow indicating a submenu */
#cssmenu  > ul .has-sub>a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #d8d8d8;
}

/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu  > ul .has-sub>a::before {
content: '';
position: absolute;
top: 17px;
right: 10px;
width: 0px;
height: 0px;

/* Creating the arrow using borders */
border: 4px solid transparent;
border-left: 4px solid #000;
}

/* Changing the color of the arrow on hover */
#cssmenu  > ul li>a:hover::after, #cssmenu  > ul li:hover>a::after {
border-left: 4px solid #fff;
}

#cssmenu  > ul li>a:hover::before, #cssmenu  > ul li:hover>a::before {
border-left: 4px solid rgba(0, 0, 0, .3);
}


/* THE SUBMENUS */
#cssmenu  > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu  > ul li:hover>ul {
top: 0px;
opacity: 1;
}



Gracias por la ayuda =D

[Zeros1001]

Código [Seleccionar] Expandir

[quote author=ZedGe link=topic=390817.msg1854577#msg1854577 date=1369268108]


/* THE SUBMENUS */
#cssmenu  > ul ul {
position: absolute;
left: 150px;
top: -9999px;
padding-left: 5px;
opacity: 0;
/* The fade effect, created using an opacity transition */
-webkit-transition: opacity .3s ease-in;
-moz-transition: opacity .3s ease-in;
-o-transition: opacity .3s ease-in;
-ms-transition: opacity .3s ease-in;
}

/* Showing the submenu when the user is hovering the parent link */
#cssmenu  > ul li:hover>ul {
top: 0px;
opacity: 1;
}



Gracias por la ayuda =D
[/quote]

ahí es donde está el problema creo yo.

Ves que lo posiciones a 150px de la izquierda (left) que es justo el ancho (width) que tienen los bloques del menú. Si quieres que se te posicione a la izquierda tienes que aplicarle width: -150px;