hover over list

hover over list

 
hi this script you did is great works fine the only propblem is when i add it again for fresh list it takes the list text and places it in the first one can you please help me
 
 
<div style="position: absolute; left: 24px; top: 112px; width: 160px; height: 184px; z-index: 1" id="layer1">
&nbsp;<head><style>
ul {
                margin-left: 20px;
                color: Black;
}
li {
                cursor: default;
}
span {
                color: #C0C0C0;
}
.style1 {
                font-size: x-large;
                color: #000000;
}
.style2 {
                font-size: medium;
                color: #000080;
}
.style3 {
 font-size: small;
 color: #000080;
}
</style><script src="jquery-latest.min.js"></script></head><body><ul style="width: 99px">























                <div style="position: absolute; width: 100px; height: 100px; z-index: 1" id="layer2">
                </div>
                <span class="style1">Software </span>
                <li class="style2">Office 2007</li>
               
</ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span><br> Outlook <br> Word <br> Excel <br> Powerpoint <br> Access <br> Publisher <br> InfoPath <br> Price £270</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);









</script>
</div>
<div style="position: absolute; left: 142px; top: 162px; width: 207px; height: 74px; z-index: 2" id="layer3">
<body>
<ul style="width: 99px">


                <span class="style1"> </span>
                <li class="style3" style="width: 179px">Office 2007 Add On's</li>
               
</ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span><br> Visio Standard £440<br>Visio Viewer Free <br>Project Standard £440<br>Project Viewer Free<br>SharePoint Designer Free</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);









</script>