html - How to right align li? -

i'm trying make dropdown menu on website. want able click on down arrow , have menu pop below it. right menu shows part way on screen.

here's picture show going on now:

i have right side of menu items lined down arrow, instead of left side is.

here's css i'm using right now.

* { margin: 0; padding: 0; border: 0; }  body {     background-image: url(bg.jpg);     background-position: center;     background-repeat: repeat;    }  #top {     background-color: #333;     height: 30px;     margin-bottom: 10px; } #menu {     color: #ccc;     height: 30px;     font-family: arial, helvetica, sans-serif;     font-weight: bold;     font-size: 12px;     position: absolute; } #top_right {     height: 30px;     width: auto;     text-align: left;     float: right;     margin-right: 5px;     color: #ccc;     font-family: arial, helvetica, sans-serif;     font-weight: bold;     font-size: 12px; }  .menu {     padding-left: 10px; } a.mlink:hover {     color: #fff;     text-decoration: none; } a.mlink:link {     color: #ccc;     text-decoration: none; } a.mlink:visited {     color: #ccc;     text-decoration: none; } a.mlink:hover {     color: #fff;     text-decoration: none; } a.mlink:active {     color: #ccc;     text-decoration: none; } #selected {     color: #6c0; } #content {     background-color: #ccc; }   /* start of menu test */ #esempio{  margin:0;  padding:0;  }  #esempio ul{  padding:0;  margin:0;  }  #esempio li{  position: relative;  float: left;  list-style: none;  margin: 0;  padding:0;  }  #esempio li a{  width:auto;  height: 30px;  display: block;  text-decoration:none;  text-align: center;  line-height: 30px;  background-color: black;  color: white;  }  #esempio li a:hover{  background-color: #666;  }  #esempio ul ul{  position: absolute;  top: 30px;  width: 100px;  visibility: hidden;  }  #esempio ul li:hover ul{  visibility:visible;  }  /* end of menu test */ 

the containing element needs positioned:

li {     position: relative; } 

then dropdown element can positioned flush right of container:

li .submenu {     position: absolute;     right: 0; } 

without seeing markup, or example of how page operates, cannot more specific.

fiddle: http://jsfiddle.net/jonathansampson/cxbtx/

sidenote

as aside, avoid doing this:

* { margin: 0; padding: 0; border: 0 } 

this cause frustration down line, when comes styling form elements , such. encourage instead use normalize css in more intuitive manner, meyer's reset.