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

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

中删除.head_menu

http://jsfiddle.net/Ucvbu/

Answer 2

.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 3

您可以做的是，我们可以将负值设置为填充，因此将负值设置为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;
}

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

3 个答案: