Единое выпадающее меню, падает вправо

Question

У меня есть проблемы с выпадающим списком. Я хочу, чтобы он опустился на левую сторону, но я не знаю, как это сделать. Я пробовал некоторые вещи с правом margin и padding, но я не могу найти способ исправить это. Код здесь:

ul { 
 
\t list-style: none; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
} 
 

 
ul li { 
 
\t display: block; 
 
\t position: relative; 
 
\t float: right; 
 
} 
 

 
li ul { 
 
\t display: none; 
 
\t margin-top: -11px; 
 
} 
 

 
ul li a { 
 
\t display: block; 
 
\t padding: 5px 10px 5px 10px; 
 
\t text-decoration: none; 
 
\t color: #f00; 
 
} 
 

 
li:hover ul { 
 
display: block; 
 
position: absolute; 
 
right: 0px; 
 
} 
 

 

 
li:hover li { 
 
\t float: left; 
 
\t margin-left: 10px; 
 
} 
 

 
li:hover a { 
 
\t background: transparent; 
 
\t margin-left: 10px; 
 
} 
 

 
li:hover li a:hover { 
 
\t background: #000; 
 
} 
 

 
#drop-nav li ul li { 
 
\t border-top: 0px; 
 
\t margin-right: 40px; 
 
\t background-color: #FFFFFF; 
 
\t width: 260px; 
 
} 
 

 
img.menu { 
 
height: 39px; 
 
width: 34px; 
 
margin-top: 41px; 
 
}

<ul id="drop-nav"> 
 

 
    <li><a href="#"><img src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-256.png" class="menu"></a> 
 
    <ul> 
 
     <li><a href="#">General Inquiries</a></li> 
 
     <li><a href="#">Ask me a Question</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 1

li:hover ul { 
    display: block; 
    position: absolute; 
    right:0px; 
}