如何正确对齐李？

Question

我正在尝试在我的网站上制作一个下拉菜单。我希望能够单击向下箭头并在其下方弹出一个菜单。现在菜单只显示在屏幕的一部分。

这是一张显示现在正在发生的事情的图片：

我希望菜单项的右侧与向下箭头对齐，而不是像左侧那样。

这是我现在正在使用的CSS。

* {
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

需要定位包含元素：

li {
    position: relative;
}

然后您的下拉元素可以定位为与其容器的右侧齐平：

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

如果没有看到标记，或者您的网页如何运作的示例，我就无法更具体。

小提琴：http://jsfiddle.net/jonathansampson/CXbTX/

旁注

顺便说一句，我会避免这样做：

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

这会让你感到沮丧，尤其是在设计表单元素等方面。我鼓励您使用能够以更直观的方式规范化CSS的内容，例如Meyer's Reset。