[wama_mms]

hello I have a CSS code as following

span.dropt {border-bottom: thin dotted; text-align:center;}
span.dropt:hover {text-decoration: none; background: #ffffff;}

span.dropt span {position: absolute; left: -9999px;
  margin: 0px 0 0 0px; padding: 3px 3px 3px 3px;
  border-style:solid; border-color:black; border-width:1px; z-index: 6; width:80px;}
  
span.dropt:hover span {left: 2%; background: #ffffff;} 
span.dropt span {position: absolute; left: -9999px;
  margin: 4px 0 0 0px; padding: 3px 3px 3px 3px; 
  border-style:solid; border-color:black; border-width:1px;}
span.dropt:hover span {margin: 20px auto auto 240px; background: #3CF;} 

and html code

<span class="dropt" title="">formal description<span><b>Protein</b><br/><a href="#">more..</a> </span></span>test !!!

<span class="dropt"><cons sem="protein">Mybbp1a</cons><span><b>Protein</b><br/><a href="#">more..</a></span></span>

when I click at the second word the margin still static and appears at the first word as the following pictures:
the first pic. when I mouse over the first word

and this pic. when I mouse over the other word

I want when I mouse over any word the subset list appear under it
thanks

[Dormilich]

the problem is position: absolute combined with your margin. and since their containing block is on equal position with its left side, there is no reason for the "popup" to take a position relative to the triggering span.