html - 同じクラスの問題を持つ複数の ID

Question

ID が異なる複数の要素にホバー アクションを適用しようとしていますが、余白と背景の位置は変わりませんが、ID ごとに同じコードを使用すると問題なく動作します。前もって感謝します！！

<li id='gostou' class='menuacao' title="Gostou do Filme?">
     <a class='link' href="" target="_blank"></a>
</li>

<li id='assistir' class='menuacao' title="Gostou do Filme?">
     <a class='link' href="" target="_blank"></a>
</li>

cssはこんな感じ

#gostou {
    background: transparent url('img/trailer.png');
    margin: 5px 2px;
}

#assistir {
    background: transparent url('img/tags.png');
    margin: 5px 2px;
}

.menuacao {
    background-position: left;
    height: 40px;
    width: 40px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.2s ease-in-out;
    list-style: none;
    cursor: pointer; 
}

.menuacao:hover {
    margin: 5px -5px;
    background-position: -80px;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
}