html - CSS - Bootstrap dropdown, with same class, positioned under different links -

html - CSS - Bootstrap dropdown, with same class, positioned under different links -

i having problem position of bootstrap dropdown class.

so, have these 2 dropdown links in table:

whenever click downwards arrows, dropdown appear. problem is, dropdown box, positioned appear under first arrow, this:

if click arrows in sec row, dropdown still appear in image above (under arrows in first row).

this code dropdown: (the table has class .referral-table)

<table class="referral-table"> <thead> <th width="4%" class="text-center">#</th> <th width="25%">referral id</th> <th width="20%">referral since</th> <th width="5%">clicks</th> <th width="9%">last click</th> <th width="8%">avg</th> <th width="10%"></th> </thead> <tbody> <tr> <td class="text-center">1</td> <td>r1241415121151</td> <td>today</td> <td class="text-center">3</td> <td>today</td> <td>-,--</td> <td> <a href="#" style="color: #00975b;" class="dropdown-toggle float-right" data-toggle="dropdown"><i class="fa fa-angle-double-down"></i> </a> <ul class="dropdown-menu ref-moreinfo"> <div class="title">r1241415121151 - info</div> <table> <tr> <td>status</td> <td><i class="fa fa-check-circle-o" title="your referral active."></i></td> </tr> <tr> <td>came from</td> <td><i class="fa fa-question" title="http://google.com/images/wwwwwhaat"></i></td> </tr> <tr> <td>earned</td> <td>$5.025</td> </tr> </table> </ul> </td> </tr> <tr> <td class="text-center">1</td> <td>r1241415121151</td> <td>today</td> <td class="text-center">3</td> <td>today</td> <td>-,--</td> <td> <a href="#" style="color: #00975b;" class="dropdown-toggle float-right" data-toggle="dropdown"><i class="fa fa-angle-double-down"></i> </a> <ul class="dropdown-menu ref-moreinfo"> <div class="title">r1241415121151 - info</div> <table> <tr> <td>status</td> <td><i class="fa fa-check-circle-o" title="your referral active."></i></td> </tr> <tr> <td>came from</td> <td><i class="fa fa-question" title="http://google.com/images/wwwwwhaat"></i></td> </tr> <tr> <td>earned</td> <td>$5.025</td> </tr> </table> </ul> </td> </tr> </tbody> </table>

this css:

.referral-table .open>.dropdown-toggle{ background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-width: 1px !important; border-radius: 4px !important; padding-left: 5px; padding-right: 5px; border-bottom: 0px; z-index: 9; position: absolute; top: 45px; right: 41px; } .ref-moreinfo { position: absolute; float: left; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-width: 1px !important; border-radius: 4px !important; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.175) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.175) !important; margin-top: -5px; margin-top: 10px; left: 607px; top: 51px; z-index: 8; padding-left: 10px; padding-right: 10px; font-size: 11px; }

how can implement each dropdown positioned under each arrow?

edit: bootply: http://www.bootply.com/qnv6ncrk9v

unfortunately bootply provided doesn't match screenshot provided, after looking @ code think starting point give .open element position: relative.

.open { position: relative; }

since .ref-moreinfo positioned absolute, needs frame set in, giving .open element said position. see here how positioned differently when clicked. hope helps correcting project.

furthermore noticed have invalid markup, elements in .ref-moreinfo container need within li, since .ref-moreinfo ul.

html css twitter-bootstrap