relative css only speech bubble - css

Question

I am using this code to generate a css only speech bubble :-
li.selected{
background-color: blue;
a{
color: white;
}
}
li.selected:after{
content: "";
position: absolute;
top: 33%;
left: 390px;
border-top: 10px solid transparent;
// border-top-color: inherit;
border-left: 10px solid blue;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
}
While this works fine, the triangle gets left when I move to the next li item as it has got a fixed position, how do I move the triangle as well?
here is my html code :-
<ul>
<li class='selected'>
Credits
</li>
<div class='line-separator'></div>
<li>
Change Password
</li>
<div class='line-separator'></div>
<li>
Investor Status
</li>
</ul>

Answer 1

Instead of using position:absolute to the arrow, you need to change it to relative position so that the arrow would position itself relatively to the .selected menu item.
See the demo here.
Note: Replace the :hover selector with the .selected class.

Answer 2

you have useful this css
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}