Html 更改子菜单的背景

我在一个网站页面上工作，我想改变子菜单的背景颜色，以匹配主菜单。目前我的代码是这样的

<style>
div.main-content{
            width:160px;
            height:500px;
            margin:20px 10px;
            background-color:#000000;
            border:1px solid black;
            opacity:.6;
        }
        div.menu-header{
            margin:0px 0px;
            font-family:"sans-serif", Gadget, sans-serif;
            font-size:20px; 
            color:#ffffff; 
            padding: 10px;
        }

        a {
            color: inherit;
            text-decoration: inherit;
        }

        ul {
            list-style-type: none;
        }

        nav ul ul {
            display: none;
        }

            nav ul li:hover > ul {
            display:block;
            position:relative; left: 160px;
            }

        .menu-header ul{
            margin: 0;
            padding: 0;
            width: 185px;
            list-style-type: none
        }

        div.sub-menu {
           width:160px;
            height:500px;
            margin:20px 10px;
            background-color:#000000;
            border:1px solid black;
            opacity:.6;
        }

</style>

<nav id="access" role="navigation">
<div class="menu-header">
    <ul id="menu-main-menu" class="menu">
        <li>
            About
            <ul>
                <div class="sub-menu">
                <li>Link 1</li>
                <li>Link 2</li>
                <li>Link 3</li>
                </div>
            </ul>
        </li>
        <li>
            Contact
            <ul>
                <div class="sub-menu">
                <li>Link</li>
                </div>
            </ul>
        </li>

    </ul>
</div>
</nav>

主要内容{
宽度：160px；
高度：500px；
利润率：20px 10px；
背景色：#000000；
边框：1px纯黑；
不透明度：.6；
}
div.menu-header{
保证金：0px 0px；
字体系列：“无衬线”，小工具，无衬线；
字体大小：20px；
颜色：#ffffff；
填充：10px；
}
a{
颜色：继承；
文字装饰：继承；
}
保险商实验室{
列表样式类型：无；
}
导航ul{
显示：无；
}
导航ul li：悬停>ul{
显示：块；
位置：相对；左侧：160px；
}
.菜单标题ul{
保证金：0；
填充：0；
宽度：185px；
列表样式类型：无
}
div.sub菜单{
宽度：160px；
高度：500px；
利润率：20px 10px；
背景色：#000000；
边框：1px纯黑；
不透明度：.6；
}


关于

链接1
链接2
链接3



接触

链接

---

我在谷歌上搜索并尝试了一些解决方案，但没有改变任何事情。我甚至尝试创建另一个类来处理子菜单（正如我在代码中所做的那样），但它不起作用。有人能给我解释一下什么地方出了问题，我怎样才能解决这个问题吗？提前非常感谢

您只想在主菜单和子菜单上使用相同的背景色

顺便说一句，您的代码中没有任何内容涉及

主要内容

div.main-content{
宽度：160px；
高度：500px；
利润率：20px 10px；
背景色：#000000；
边框：1px纯黑；
不透明度：.6；
}
div.menu-header{
保证金：0px 0px；
字体系列：“无衬线”，小工具，无衬线；
字体大小：20px；
颜色：#ffffff；
填充：10px；
}
a{
颜色：继承；
文字装饰：继承；
}
保险商实验室{
列表样式类型：无；
}
导航ul{
显示：无；
}
导航ul li：悬停>ul{
显示：块；
位置：相对位置；
左：175px；
}
.菜单标题ul{
保证金：0；
填充：0；
宽度：185px；
列表样式类型：无
}
div.sub菜单{
宽度：160px；
高度：500px；
利润率：20px 10px；
背景色：rgba（0,0,0,6）；
边框：1px纯黑；
}
#通路{
边框：1px纯黑；
}
.菜单标题{
边框：1px纯红；
}
.菜单{
边框：1px纯黑；
背景色：rgba（0,0,0,6）；
}

关于

链接1
链接2
链接3


接触

链接

您的代码显示您已更改子菜单的背景色。。。这是你的代码的提琴文件，我刚刚添加了李灿的背景色，请解释一下你想要实现什么。。。任何屏幕截图都会有帮助。

中不允许使用
，只有
。以下是全部代码。@IkoTikashi你说得对，这是最新的提琴文件