高分悬赏：模仿Discuz1.5x升级提示（Tips）效果，但是有点问题，朋友忙帮忙看下，谢谢先！

希望解决的问题：
第一个鼠标放在box这个层上面也就是让显示Tips层时，怎么让其下面的show这个层位置不变呢？现在是只要鼠标放到show这个层上，tips到是能正常显示，但show这个层却跑到下面去了，导致非常晃眼，而且导致box和show这2个层之间差距那么大，看上去tip是根本不是针对show这个层的提示了。第二个就是怎么让Tips这个层的宽度随着里面的内容自适应变化，也就是这里面的内容很多时，宽度自动变大，这样就不会导致里面多出的文字跑到这个层外面去（由于没有找到好的解决方法，我只得给这个层设置overflow这个属性。因为有的等级名字比较长，有的比较短，所以也无法给其一个固定的width值，就是希望能做到不管里面的内容有多少个字，都不会跑到层外面去，也不会导致多出的文字被隐藏，而是像现在的样式一样全部显示）以上2个问题研究了一晚上没弄出来，希望知道的朋友帮忙看下，谢谢！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Tips Test</title>
<style> .dno{ display:none;}
.dyes{ display:block;}#tips {
background:none repeat scroll 0 0 #FFF4DD;
border:1px solid #F26C4F;
height:30px;
line-height:30px;
width:12%;
padding:0px 20px
}
#daosanjiao
{
background:url("http://www.discuz.net/data/attachment/forum/201011/14/111548sut1nuo3uczi9hiu.gif") no-repeat scroll 5px 0 transparent;
margin-top:-1px;
margin-left:21px;
overflow:hidden;
}
.show{
border:1px solid #0099CC;
background-color: #EBF2F8;
width:150px;
height:30px;
text-align:center;
line-height:30px;
font-size:13px;
overflow:hidden;
margin-top:40px;
}
.box{ display:none;}
</style>
<div  class="box" id="box">
  <div id="tips">离下一等级Lv2还需要30分</div><div id="daosanjiao"></div>
</div><div class="show" onMouseOver="box.className='dyes'" onMouseOut="box.className='dno'">放这里出现Tips提示</div></body>
</html>