html - 如何右对齐李？

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;
}

没有看到标记，也没有看到您的页面如何运行的示例，我无法说得更具体。

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

旁注

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

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

这会让您感到有些沮丧，尤其是涉及到样式表单元素等方面时。我鼓励您改为使用能够以更直观的方式规范化 CSS 的东西，例如 Meyer's Reset .