如何移动下拉菜单，菜单向左

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

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

Answer 2

尝试将菜单放在div 容器中，然后将此容器设置为float:left;或者，您可以设置宽度并使用margin:0 auto;将其居中。您需要从.head_menu中删除position: absoulte;

http://jsfiddle.net/Ucvbu/

Answer 3

你可以做的是，我们可以将负值设置为填充，因此将负值设置为右边距。然后增加右侧填充，使其下拉列表正确对齐。

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