moz-opacity的写法应该是-moz-opacity；
background的url(../images/boxtopttlist.gif) no-repeat top 10px的格式不对：no-repeat后面应该是2个数字分别表示x轴和y轴的，前边是x后边是y，这个不能错，还有就是数字大小问题，x的负数就是将图向左移动后的显示区域，y的负数是向上移动的后的，正数相反；
后面几个没有前后文代码 不清楚是啥毛病
这个其实很简单啊，用hover就行。
下面是例子：
css代码
<style type="text/css">body{background:#566}
ul{margin-left: 0padding-left: 0}
li{
display:inline-block
color: #fff
font-size: 20px
line-height: 30px
font-weight: bold
text-align: center
}
.menuitem{
float: left
width: 120px
list-style: none
}
.submenuitem{
display: none
float: none
margin-left: 0
list-style: none
border: dotted #e00
border-width: 0 0 2px 0
}
.menuitem:hover{
background-color:#b00
}
.menuitem:hover .submenuitem{
display: block
background-color:#b00
}
</style>
HTML代码
<ul><li class="menuitem">首页</li>
<li class="menuitem">
学校概况
<ul>
<li class="submenuitem">学校简介</li>
<li class="submenuitem">现任领导</li>
<li class="submenuitem">信息公开</li>
</ul>
</li>
<li class="menuitem">机构设置</li>
</ul>
效果大概其就是你想要的那种，不用js，鼠标经过时自动出现
