Html 链接/悬停效果不适用于固定导航栏中页面的某些部分

我一直在为一个朋友开发一个简单的网站，并决定使用Weebly（是的，我知道，nooby），因为我不想从零开始创建一个简单的网站。我在页面右侧添加了一个固定的导航栏，以圆形按钮的形式，带有链接。不幸的是，当我滚动时，一旦我到达页面上的文本框，链接和悬停效果就会停止工作（按钮仍然可以正常滚动）。一旦它通过，他们就会再次工作。由于我使用Weebly，我无法完全访问页面中的所有html，但我可以完全访问CSS文件。这是带有3个按钮的导航栏的代码：

<div data-spy="affix" class="offset8 span1 well offset7 small  nav">
        <ul class="nav nav-list">
            <p><a href="#A"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#B"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
<p><a href="#L384"><img src="http://i.imgur.com/wV1JVH2.png" height="32" width="32" onmouseover="this.src='http://i.imgur.com/whPzX4a.png'" onmouseout="this.src='http://i.imgur.com/wV1JVH2.png'" <a></p>
        </ul>
</div>

下面是几张照片，展示了这个问题：

同样，很遗憾，我无法访问文本框的代码，因为它位于Weebly中

---

任何帮助都将不胜感激。谢谢

你的css是错误的。应该是这样的：

ul.nav {
    position: fixed;
    z-index: 1000;
    right: 0px;
    top: 20%; /* Change this to your needs */
}

---

工作得很好。谢谢你的帮助，我的朋友！太好了：）很高兴它成功了。你能同意这个答案吗？：）

ul.nav {
    position: fixed;
    z-index: 1000;
    right: 0px;
    top: 20%; /* Change this to your needs */
}