html下拉表覆盖透明,css透明元素如何遮挡住fixed元素

如图，导航栏是透明的元素，这个列表position设置成了fixed，脱离了文档流。

层级关系：导航栏的层级高于列表的层级。

如何让这个列表被导航栏遮住？除了下面这种改成纯色的方案，还有什么思路吗？

------------------还是贴一下代码吧----------------------

body {

background: rgb(16, 137, 62);

}

nav {

width: 100%;

height: 40px;

padding: 5px;

position: relative;

background: rgba(0, 0, 0, .15);

z-index: 1;

}

ul {

color: #fff;

width: 120px;

background: rgba(0, 0, 0, .1);

padding: 4px 0;

position: fixed;

top: 6px;

left: 120px;

z-index: 0;

}

ul li {

list-style: none;

text-align: center;

margin: 8px 0;

}

• 测试项目1
• 测试项目2
• 测试项目3
• 测试项目4
• 测试项目5

效果：

--------补充GIF，类似这样的效果，不过它的导航栏是纯色的，所以没什么问题------------------