画像をずらしながらメニュー形式で表示したいのですが、うまくいきません

はじめて質問させていただきます。

某スクールにてweb制作を最近勉強し始めましたが、演習課題のコーディングをしていたところ、添付の画像の左側のように画像をずらしながら表示をさせるというのが、なかなかうまくいかず、非常に困っております。
現在は、boxタグを使用し、リストを作成した上に画像を載せていますが、boxタグを使用せずに同じものを作ることができるやり方があるならご教授いただければと思います。
よろしくお願い致します。

css記述

.box {
    margin: 10px 0;
    float: left;
    width: 100%;
    background: #ffffff ;
}
.box img {
    max-width: 100%;
    float: right;
    margin: 0;
}
.box p {
    margin: 0;
    padding: 0px;
}
#sidebar a {
    text-decoration: none;
    float: left;
    display:block;
    width: 255px;
    height: 60px;
    background-image :url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position:  0 left bottom;
}
#sidebar ul {
    display: block;
    height: 300px;
}
#sidebar ul li {
    display: block;
    height: 60px;
}
#sidebar ul .careplan a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: 0px left bottom;
}
#sidebar ul .grouphome a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: -60px left bottom;
}
#sidebar ul .service a {
    background-image: url(img/top-menu.jpg);
    background-repeat: no-repeat;
    background-position: -120px left bottom;
}
#sidebar ul .homehelp a {
    background-image: url(img/top-menu.jpg) ;
    background-repeat: no-repeat;
    background-position: -180px left bottom;
}
#sidebar ul .daycare a {
    background-image: url(img/top-menu.jpg) ;
    background-repeat: no-repeat;
    background-position; -240px left bottom;
}

HTML記述

<div class="box">
        <img src="img/icatch.png">
        <div class="left">
        <p>
        <ul id = "sidebar">
        <li class="careplan"><a href="html.html">ケアプラン</a></li>
        <li class="grouphome"><a href="html.html">グループホーム</a></li>
        <li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
        <li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
        <li class="daycare"><a href="html.html">デイサービス</a></li>
        </ul>
        </p>
    </div>
</div>