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>
              <a href="#">Menu 1</a>
               <ul>
                   <li><a href="#">Submenu 1</a></li>
                   <li><a href="#">Submenu 2</a></li>
                   <li><a href="#">Submenu 3</a></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