Changing position of sublists of a dropdown menu - css

Question

I'm making a CSS dropdown menu. So, when the mouse hovers one menu item, it displays its subitens. Well, all is working fine except the position of submenus. What I got is this:
|Menu 1| |Menu 2|
|Submenu 1|
|Submenu 2|
|Submenu 3|
But I have to change this layout into this, when the mouse hovers a item:
|Menu 1| |Menu 2|
|Submenu 1|
|Submenu 2|
|Submenu 3|
I don't know if it's even possible to make that change.
CSS
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
float: right;
width: auto;
}
.menu ul{
background:#EBF0FD;
line-height: 2.0em;
list-style:none;
margin:0;
padding:0px;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#EBF0FD url("images/seperator.gif") bottom right no-repeat;
color:#336699;
display:block;
font-weight:normal;
line-height:2.0em;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #5E78B5 bottom center no-repeat;
color:white;
text-decoration:none;
}
.menu li ul{
background:#EBF0FD;
display:block;
float: left;
height:auto;
padding:0px;
margin:0px;
border-style:solid;
border-color:#C9D8FF;
position:absolute;
width:auto;
z-index:200;
}
.menu li:hover ul{
display:block;
}
.menu li li {
background: bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
color: red;
}
.menu li:hover li a{
background:none;
color: #336699;
}
.menu li ul a{
display:block;
line-height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#5E78B5 left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
HTML
<div class="menu">
<ul>
<li>
Menu 1
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</div>
SOLUTION:
Andres Ilich's code have solved my problem (Thanks!). Now, all submenus upper right edge is correctly aligned with the bottom right edge of the top menus. However, there was a problem when several menus itens (top level) were in the layout so that they appeared in vertical, not horizontal. I was able to correct it. So, I'm posting the final working CSS if anyone is also facing this problem. Thanks for helping!
.menu {
font-size:14px;
font-weight:bold;
float: right;
width: auto;
}
.menu ul {
background:#EBF0FD;
line-height: 2.0em;
list-style:none;
margin:0;
padding:0px;
font-family: Verdana, Geneva, sans-serif;
}
.menu li {
float:left;
padding:0;
margin:0;
position:relative;
}
.menu li a {
background:#EBF0FD;
color:#336699;
display:block;
font-weight:bold;
line-height:2.0em;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #5E78B5 bottom center no-repeat;
color:white;
text-decoration:none;
}
.menu li ul {
background:#EBF0FD;
display:none;
float: left;
height:auto;
padding:0px;
margin:0px;
border-style:solid;
border-color:#C9D8FF;
position: absolute;
right: 0;
width:auto;
z-index:200;
}
.menu li:hover ul {
display:block;
}
.menu li li {
background: bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
background:none;
color: #336699;
}
.menu li ul a {
display:block;
line-height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 21px;
text-align:right;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#5E78B5 left no-repeat;
color:#ffffff;
text-decoration:none;
}

Answer 1

You can absolutely position your submenu and just align it to the right most part of your main menu, like so:
First declare your li items as relative, to position the submenu properly:
.menu li {
float: left;
padding: 0;
position: relative;
}
Then declare your submenu as position:absolute along with the right:0 property, to position your submenu absolutely to the right edge of your main menu:
.menu li ul {
position: absolute;
right: 0;
}
And then just position your submenu text to the right to complete the effect:
.menu li ul a {
text-align:right;
}
Edit: Demo

Answer 2

Try this
.menu li ul { display:block; margin-left: -130px; }
jsfiddle example:
http://jsfiddle.net/BBJv5/
But you have to know what width the submenu items gonna have, before you do it this way.

Answer 3

see the fiddle for code and demo
Fiddle: http://jsfiddle.net/dMCKD/1/
Demo: http://jsfiddle.net/dMCKD/1/embedded/result/
Screen Shot: