How to move drop down menu, menu to the left? - 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;
}
thats my code and the drop down menu looks like this.
http://s18.postimg.org/612nvikmh/Untitled.jpg
(sorry if its flipped idk why but when I uploaded it it flipped that way)
can you guys help me move it to the left to show the full menu? I've been trying to solve this for an hour now and can't seem to find a fix for it on the internet, and I am now very confused as hell.
thanks everyone!

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

Try to put the menu in a div container and Then set this container float:left;
Or you could set width and use margin:0 auto;to center it.
And you need to delete the position: absoulte;from .head_menu
http://jsfiddle.net/Ucvbu/

Answer 3

What you can do is, we can set the negative value to the padding, so set the negative value to margin-right. Then increase the right padding to the so that it dropdown is aligned correctly.
.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;
}