HTML，CSS无法选择的图像不起作用

Question

我创建了一个网站，我的导航按钮由图像组成，如下面的代码所示。现在，如果我访问我的网站并点击＆amp;拖动按钮，它将像下图（红色圆圈）一样拖动。我不希望我的按钮这样做。我希望他们坐在那里，只能点击，但不能选择＆amp;可拖动或保存在（查看者）计算机上。

这个可拖动的图像是一个“幻影”图像，它实际上并没有移动按钮。

<div class="top unselectable">
    <ul>
    <li><a href="index.html"><img src="images/home2.png" class="menu" width="218" height="50" ></a></li>
    <li><a href="ps.html"><img src="images/ps2.png" class="menu" width="218" height="50" ></a></li>
    <li><a href="ae.html"><img src="images/ae2.png" class="menu" width="218" height="50" ></a></li>
    <li><a href="contact.html"><img src="images/contact.png" class="menu" width="218" height="50" ></a></li>
    </ul> 
</div>

CSS：

.top.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}