menu left to rigth

hello, I would like to open a submenu at left when I'm hover the main one, this is what I have:

HTML:

	<div id='menu'> <ul class="menu">

		<li><a href='one.php'> One </a></li>
		<li><a href='two.php'> Two </a>
			<ul> Two-One </ul>	
			<ul> Two-Two </ul>
		</li>
         </ul> </div>

HTML:

And CSS:

#menu {
	float:left;
	margin-top:25px;
	width:240px;
	height:300px;
	border-style: solid;
	border-color: #0e69be;
	border-size: 1px;
	border-width: 1px;
	}
	
#menu li a {
	height: 32px;
  	voice-family: "\"}\"";
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	

#menu li a:link, #menu li a:visited { 
	display: block;
	background: LightSkyBlue;
	padding: 8px 0 0 10px;
	}

	

#menu li a:hover { 
	background: SkyBlue;
	padding: 8px 0 0 10px;
	}

#menu li a:active { 
	color: #0e69be;
	background: DeepSkyBlue;
	padding: 8px 0 0 10px;
	}

ul.menu ul {
   display:none;
   list-style:none;
} 

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

Code (markup):

It appear under the selection, but I would like to open it at left.

Could you help me, please?

Thanks! Regards!

 

1) Div for no reason.

2) invalid nested UL's. UL's are invalid without LI. I think you meant to use one UL.

3) singles or doubles? *** pick one and stick with it.

4) use of spaces to do padding's job will be applied inconsistently cross-browser.

5) disappearing menus should use absolute positioining, NOT display state changes for show/hide. (though the state change is needed or IE will often 'stick' in one state)

6) fixing the height of an element that is likely to have elements added or removed is inherently made of /FAIL/.

7) that voice family hack bull for IE 5.2 mac? Useless and serves no purpose here. You want them fixed px height, set a px metric font with px metric padding and px metric line-height.

8) you set the same padding three times on the anchor - when styling psuedo's like values only need to be set ONCE on the parent.

9) camelbacks on color is 'iffy' and can break in older versions of gecko based browsers - just like caps in non-quoted font names.

10) not sure why you are setting :active different from :hover - or why setting it at all on a cascading menu that's not going to work with keyboard navigation anyways, so get rid of that. Or is that supposed to indicate the current page, in which case :active is NOT what you want.

11) dicking with all those sibling selectors on the hover state is just asking for it to fail. It also might be nice to have the color state 'stick' when you mouseover the flyout.

So first let's clean up the HTML

<ul id="menu">
	<li><a href="one.php">One</a></li>
	<li>
		<a href="two.php">Two</a>
		<ul>
			<li><a href="#">Two-One</a></li>
			<li><a href="#">Two-Two</a></li>
		</ul>
	</li>
</ul>

Code (markup):

Is what I THINK you mean to have.

Then some CSS:

/* 
	assumes reset is applied to UL, LI and A 
	and that you are using something like 
	peterned's hover anywhere for IE 6/earlier support
*/

#menu {
	list-style:none;
	float:left;
	width:240px;
	display:inline; /* prevent IE margin doubling */
	margin-top:25px;
	font:normal 14px/16px arial,helvetica,sans-serif;
	border:1px solid #000;
}

#menu li {
	position:relative;
	width:240px;
}
	
#menu li ul {
  list-style:none;
	position:absolute;
	top:0;
	left:-999em;
	width:240px;
	display:inline; /* set state so we have a swap to make IE not 'stick' in one state */
} 

#menu li:hover ul {
	left:240px;
	display:block;
} 

#menu li a {
	display:block;
	padding:8px 0;
	text-decoration: none;
	background:lightskyblue;
}	

/* the following sucks code-wise, but looks nice rendered */

#menu li:hover a { 
	background:skyblue;
}

#menu li:hover ul a {
	background:lightskyblue;
}        

#menu li ul li:hover a { 
	background:skyblue;
}

Code (markup):

Or something along those lines. (very rough, untested)