列表样式图像项目符号显示不正确

Question

我正在尝试制作一个侧边栏导航列表，其中包含另一个列表，单击该列表时其内容将显示/隐藏。对于包含可折叠列表的li，我放入了自定义list-style-image（实际上，单击时在JS之间切换了两个）。问题是自定义图像呈现在可折叠列表的边缘页，而不是常规项目符号所在的行。图像具有透明背景，所以这不是问题。也许与我如何将div浮动到左侧有关？ 这是我的HTML和CSS，以及其显示方式的屏幕截图。

代码段（css / html）：

    #sidebar{
      position: fixed;
      float: left;
      width: 20%;
      background-color: green;
    }

    #main{
      float: right;
      width: 75%;
      background-color: blue;
    }

    #songs{
      margin-bottom: 0;
    }

    .song{
      list-style: decimal;
    }

    .songclosed{
      display: none;
    }

    .closed{
      list-style-image: url("../images/closed.png");
    }

    .open{
      list-style-image: url("../images/open.png");
    }

<div id="sidebar">
      <ul>
        <li>
          <p>Home</p>
        </li>
        <li>
          <a href="info.html">Info</a>
        </li>
        <li id="openclose" class="closed" onclick="openclose()">
          <p id="songs">Songs</p>
          <ol>
            <li class="song songclosed">
              <a href="#">Song 1</a>
            </li>
            <li class="song songclosed">
              <a href="#">Song 2</a>
            </li>
            <li class="song songclosed">
              <a href="#">Song 3</a>
            </li>
          </ol>
        </li>
      </ul>
    </div>

    

Image--See the little black triangle on the left?

我已经尝试过list-style-position: inside和overflow: hidden。两者都有作用，但都无法正常工作。

最后的注意：图像比常规的项目符号要大（100x100），因此可能会出现轻微问题，但是我可以对其进行编辑，看看是否有人可以告诉我常规项目的尺寸有什么变化。