Show on hover div center when screen resolution low

Question

I'm creating a menu using div, which shows div when mouse over. for the high resolutions it shows that div on the right side, but in low resolution i need to show this div to the left side or center,

here i attached a image of high resolution.

And here my codes and demo 

http://jsfiddle.net/9xpDb/

please help me to resolve this. thanks

Answer 1

Adding position relative and left: 0px will display the text all the way to the left. I modified this code in the demo and it worked.

http://jsfiddle.net/9xpDb/3/

.trigger:hover +div {

display: block;
position: relative;
left: 0px;

}

<link rel="stylesheet" media="screen and (max-device-width: 600px)" href="small-device.css" />

If you load the css into a separate stylesheet and then apply the link tag above, you can specify loading the new stylesheet you created for low resolutions (ex: width less than 600px)