class写错的地方引发的错误

预想要出的界面：

附上关键的正确代码：

<div class="hBRight">
    <ul class="hBRightImgs">
        <li><img src="images/hBImgs01.jpg"></li>
        <li class="zIndex2"><img src="images/hBImgs01.jpg"></li>
        <li class="zIndex3"><img src="images/hBImgs01.jpg"></li>
        <li class="zIndex4"><img src="images/hBImgs01.jpg"></li>
    </ul>
        <ul class="hBRightNav">
            <li class="hover"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>

.hBRight{
    float: right;
    width: 801px;
    height: 270px;
    position: relative;
}
.hBRightImgs li{
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}
.hBRightImgs li.zIndex2{
    z-index: 2;
}
.hBRightImgs li.zIndex3{
    z-index: 3;
}
.hBRightImgs li.zIndex4{
    z-index: 4;
}
.hBRightNav{
    position: absolute;
    bottom: 10px;
    left:45%;
    z-index: 999;
}
.hBRightNav li{
    float: left;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: #fff;
    margin-right: 15px;
}
.hBRightNav li:hover,.hBRightNav li.hover{
    background-color: #09d;
}

实际的界面：

附上出错的代码：

<div class="hBRightImgs">
    <ul>
    <li><img src="images/hBImgs01.jpg"></li>
    <li class="zIndex2"><img src="images/hBImgs01.jpg"></li>
    <li class="zIndex3"><img src="images/hBImgs01.jpg"></li>
    <li class="zIndex4"><img src="images/hBImgs01.jpg"></li>
</ul>
    <ul class="hBRightNav">
        <li class="hover"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

把class=“hBRightImages”写在了div中，应写在ul中。其中用的这个div是多余的。