javascript - Which element effects the positioning of my jquery drop-down menu --> making it go right -

since while using drop-down jquery check list. though, styling purposes want make list not drop down rather have fold/go right.

i try'd couple of things (in css) accomplish nothing seems work far, cant find right element effects menu dropping down. or perhaps jquery handled cant see jquery doing that..

this html of drop-down list:

<form method="post"> <div id="list1" class="dropdown-check-list">         <span class="anchor">select country in event takes place</span>         <ul class="items">               <li><input type="checkbox" name="columns_location[]" value="belgium" />belgium</li>               <li><input type="checkbox" name="columns_location[]" value="denmark" />denmark</li>               <li><input type="checkbox" name="columns_location[]" value="england" />england</li>                <li><input type="checkbox" name="columns_location[]" value="france" />france</li>                 <li><input type="checkbox" name="columns_location[]" value="germany" />germany</li>                 <li><input type="checkbox" name="columns_location[]" value="italy" />italy</li>                <li><input type="checkbox" name="columns_location[]" value="netherlands" />netherlands</li>                 <li><input type="checkbox" name="columns_location[]" value="poland" />poland</li>               <li><input type="checkbox" name="columns_location[]" value="romania" />romania</li>               <li><input type="checkbox" name="columns_location[]" value="scotland" />scotland</li>               <li><input type="checkbox" name="columns_location[]" value="spain" />spain</li>               <li><input type="checkbox" name="columns_location[]" value="sweden" />sweden</li>               <li><input type="checkbox" name="columns_location[]" value="other" />other</li>               <li><input type="checkbox" class="select-all" id="select-all" value="select/deselect all"/>select/deselect all</li>           </ul>     </div>      <div id="list2" class="dropdown-check-list">         <span class="anchor">select type of event</span>         <ul class="items">               <li><input type="checkbox" name="columns_type[]" value="symposium" />symposium</li>               <li><input type="checkbox" name="columns_type[]" value="round table" />round table</li>               <li><input type="checkbox" name="columns_type[]" value="meeting" />meeting</li>                <li><input type="checkbox" name="columns_type[]" value="conference" />conference</li>                <li><input type="checkbox" name="columns_type[]" value="site visit" />site visit</li>                <li><input type="checkbox" name="columns_type[]" value="debate" />debate</li>                <li><input type="checkbox" name="columns_type[]" value="other" />other</li>                <li><input type="checkbox" class="select-all" id="select-all" value="select/deselect all"/>select/deselect all</li>         </ul>     </div>    <input type="submit" name="go" value="submit"/> </form> 

this css of drop-down list:

.dropdown-check-list {   display: inline-block;   padding: 0px 10px 20px 0px; } .dropdown-check-list .anchor {   position: relative;   cursor: pointer;   display: inline-block;   padding: 5px 50px 5px 10px;   border: 1px solid #ccc; } .dropdown-check-list .anchor:after {   position: absolute;   content: "";   border-left: 2px solid black;   border-top: 2px solid black;   padding: 5px;   right: 10px;   top: 20%;   -moz-transform: rotate(135deg);   -ms-transform: rotate(135deg);   -o-transform: rotate(135deg);   -webkit-transform: rotate(135deg);   transform: rotate(135deg); } .dropdown-check-list .anchor:active:after {   right: 8px;   top: 21%; } .dropdown-check-list ul.items {   padding: 2px;   display: none;   margin: 0;   border: 1px solid #ccc;   border-top: none; } .dropdown-check-list ul.items li {   list-style: none; } .dropdown-check-list.visible .anchor {   color: #0094ff; } .dropdown-check-list.visible .items {   display: block; }    

and javascript/jquery code:

 $('.select-all').click(function (event) {     var $list = $(this).closest('.dropdown-check-list');     $list.find(':checkbox').prop('checked', $(this).prop('checked')); });  $('.dropdown-check-list .anchor').click(function(){     $(this).closest('.dropdown-check-list').toggleclass("visible"); }); 

i try'd affect rotate degrees in css affects symbol (arrow).

i hope point me in right direction, thank in advance!

from understand want drop down open right instead of straight center, achieve assign margin ul , dropdown window itself.

ie:

.dropddownbox {   margin-left: 50px;  } 

in css push dropdown right you. same goes left, can create negative left margin push left if want.

edit: noticed shoots down dropdown menu , button included in jsfiddle modified little make sure doesn't can this:

.dropddownbox {   position: absolute;   z-index: 10;   margin-left: 50px;  } 

i set z-index make sure shows above other divs etc, if overlap.