Question

I’m trying to make a dropdown menu on my website. I want to be able to click on a down arrow and have a menu pop up below it. Right now the menu only shows up part way on the screen.

Here’s a picture to show what is going on now:

I would like to have the right side of the menu items lined up with the down arrow, instead of the left side like it is.

Here’s the CSS that i’m using right now.

* {
margin: 0;
padding: 0;
border: 0;
}

body {
    background-image: url(bg.jpg);
    background-position: center;
    background-repeat: repeat;  

}

#top {
    background-color: #333;
    height: 30px;
    margin-bottom: 10px;
}
#menu {
    color: #CCC;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    position: absolute;
}
#top_right {
    height: 30px;
    width: auto;
    text-align: left;
    float: right;
    margin-right: 5px;
    color: #CCC;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
}

.menu {
    padding-left: 10px;
}
a.mlink:hover {
    color: #FFF;
    text-decoration: none;
}
a.mlink:link {
    color: #CCC;
    text-decoration: none;
}
a.mlink:visited {
    color: #CCC;
    text-decoration: none;
}
a.mlink:hover {
    color: #FFF;
    text-decoration: none;
}
a.mlink:active {
    color: #CCC;
    text-decoration: none;
}
#selected {
    color: #6C0;
}
#content {
    background-color: #CCC;
}


/*
START OF MENU TEST
*/
#esempio{

margin:0;

padding:0;

}

#esempio ul{

padding:0;

margin:0;

}

#esempio li{

position: relative;

float: left;

list-style: none;

margin: 0;

padding:0;

}

#esempio li a{

width:auto;

height: 30px;

display: block;

text-decoration:none;

text-align: center;

line-height: 30px;

background-color: black;

color: white;

}

#esempio li a:hover{

background-color: #666;

}

#esempio ul ul{

position: absolute;

top: 30px;

width: 100px;

visibility: hidden;

}

#esempio ul li:hover ul{

visibility:visible;

}

/*
END OF MENU TEST
*/

Answer 1

The containing element needs to be positioned:

li {
    position: relative;
}

Then your dropdown element can be positioned to be flush to the right of its container:

li .submenu {
    position: absolute;
    right: 0;
}

Without seeing markup, or an example of how your page operates, I cannot be much more specific.

Fiddle: http://jsfiddle.net/jonathansampson/CXbTX/

Sidenote

As an aside, I would avoid doing this:

* { margin: 0; padding: 0; border: 0 }

This will cause you some frustration down the line, especially when it comes to styling form elements and such. I would encourage you instead to use something that will normalize the CSS in a more intuitive manner, like Meyer’s Reset.