레이아웃 파일

<div id="topBox">
    <div id="topInnerBox">

        <div id="logoBox">
            <!-- 로고 이미지 -->
            <a href="#"><img src="./images/logo.png" alt="" class="iePngFix" /></a>
        </div>

        <div id="searchButtonBox">
            <div id="searchBox">
                <!-- 검색 폼 -->
                <form action="" method="post">
                    <input type="text" name="search_keyword" class="searchKeyword" />
                    <input type="image" src="./images/button_search.gif" class="searchButton" />
                </form>
            </div>

            <ul id="menuBox">
                <!-- 상단 버튼 -->
                <li class="menuItem itemOn">
                    <span class="menuLeftBG"></span>
                    <span class="menuText">
                        <a href="#">Test</a>
                    </span>
                    <span class="menuRightBG"></span>
                </li>
                <li class="menuItem itemOff" onmouseover="this.className='menuItem itemOn'" onmouseout="this.className='menuItem itemOff'">
                    <span class="menuLeftBG"></span>
                    <span class="menuText">
                        <a href="#">Test</a>
                    </span>
                    <span class="menuRightBG"></span>
                </li>
            </ul>
        </div>
    </div>
</div>

css 파일

#menuBox .menuItem .menuLeftBG {
    width:5px;
    height:33px;
    float:left;
}

#menuBox .itemOn .menuLeftBG {
    background:transparent url("../images/top_button_left_on.gif") no-repeat left top;
}

#menuBox .itemOff .menuLeftBG {
    background:transparent url("../images/top_button_left.gif") no-repeat left top;
}


위와 같은 파일이 있는데요..
layout.html에서 #menuBox .menuItem .menuLeftBG 이런 코딩이 있는데..
정확히 무엇인지좀 알려 주세요..