html - 如何将下拉菜单，菜单向左移动？

Question

.head_menu
{
    height:30px;
    line-height:30px;
    color:#FFF;
    position:absolute;
    font-family:Arial;
    font-size:15px;
    right:15px;
    z-index:2;
    top:3px;

}
.head_menu ul
{
    padding:0px;
    margin:0;
    list-style:none;
}
.head_menu ul li
{
    padding:0;
    margin:0;
    float:left;

}
.head_menu ul li a
{
    color:#FFF;
    display:block;
    text-decoration:none;

}
.head_menu ul li a:hover
{

    color:#FFF;
    text-decoration:underline;
    text-shadow: 0 0 10px #FFF;
}
.head_menu ul li ul a:hover
{
    background:#e17310;
}
.head_menu ul li ul
{
     display: none;
     width: auto;
     position:absolute;
     top:30px;
     padding:0px;
     margin:0px;

}
.head_menu ul li:hover ul
{
     display:block;     
     position:absolute;
     margin: 0;
     padding: 0;
}
.head_menu ul li:hover li
{
    float: none;
    list-style:none;
    margin:0px;

}
.head_menu ul li:hover li
{
    background:#e7a017;
}
.head_menu ul li:hover li a
{
    color: #FFF;
    padding:0 20px;
    display:block;
    width:80px;
}
.head_menu ul li li a:hover
{
    color:#FFF;
}

这就是我的代码，下拉菜单看起来像这样。

http://s18.postimg.org/612nvikmh/Untitled.jpg

（对不起，如果它翻转了 idk 为什么但是当我上传它时它翻转了）

你们能帮我把它移到左边来显示完整的菜单吗？我一直在尝试解决这个问题一个小时，但似乎无法在互联网上找到解决方法，我现在非常困惑。

感谢大家！

Answer 1

您可以做的是，我们可以将负值设置为 padding，因此将负值设置为 margin-right。然后将右填充增加到 ，以便它的下拉列表正确对齐。

.head_menu ul li:hover ul
{
     display:block;     
     position:absolute;
     margin-right:-20px;
     padding: 0;

}



.head_menu ul li:hover li a
{
    color: #FFF;
    padding:0 20px;
    display:block;
    width:80px;
    padding-right:10px;
}

Answer 2

尝试将菜单放在一个 div 容器中，然后设置这个容器float:left; 或者你可以设置宽度并使用margin:0 auto;它来居中。你需要删除position: absoulte;from.head_menu

http://jsfiddle.net/Ucvbu/

Answer 3

.head_menu
{
height:30px;
line-height:30px;
color:#FFF;
position:absolute;
font-family:Arial;
font-size:15px;
left:15px;
z-index:2;
top:3px;

}