如果你懂得PHP或者JS，我可以再和你说怎么改变成你要的效果。
前提是你懂得点动态脚本的基础理念才可以。
你要明白，CSS不过是个定义好的样式，等着你调用的样式。
即是是XML，它现在也不能扩展到自动定义你喜欢的样式列表。
你在下面运用的是ol样式，上面却定义ul的样式，是肯定没用的。
他们是两种列表。
建议楼主把书静下心来，哪怕简单的看上两天，把基础看好，这样后，你再去尝试模仿者写些CSS样式。否则你以后写这个会遇到很问题。
1、利用js代码首先创建一个div，document.createElement('div')2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
3、确定位置之后，显示div即可。
示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。
<input type="text" id="city" value="beijing"/>
方法：
function createDiv(){
//首先创建div
var descDiv = document.createElement('div')
document.body.appendChild(descDiv)
//获取输入框dom元素
var text = document.getElementById('city')
//计算div的确切位置
var seatX = text.offsetLeft + text.offsetWidth//横坐标
var seatY = text.offsetTop + text.offsetHeight//纵坐标
//给div设置样式，比如大小、位置
var cssStr = "z-index:5width:420pxheight:300pxbackground-color:#FFFF99border:1px solid blackposition:absoluteleft:"
+ seatX + 'pxtop:' + seatY + 'px'
//将样式添加到div上，显示div
descDiv.style.cssText = cssStr
descDiv.innerHTML = '这是一个测试的div显示的内容'
descDiv.id = 'descDiv'
descDiv.style.display = 'block'
}
