HTML和CSS：子菜单显示

我需要一些帮助。我正在制作这个导航文胸，里面有一个菜单列表，其中一个就是Award。奖励有隐藏的子菜单，如果我将其悬停，它的子菜单应该对用户可见。但是，当我将鼠标悬停在奖励上时，它的子菜单对用户不可见。我不知道我做错了什么。我希望有人能在这里帮助我

这是我的密码

函数openNav（）{ document.getElementById（“导航侧栏”）.style.width=“142px”； document.getElementById（“main”）.style.height=“142px”； } 函数closeNav（）{ document.getElementById（“导航侧栏”）.style.width=“0”； document.getElementById（“main”）.style.height=“0”； }

。侧栏{
宽度：0；
列表样式：无；
位置：绝对位置；
身高：100%；
z指数：0；
左：2px；
背景#38424f；
溢出x：隐藏；
过渡：0.5s；
填充顶部：10px；
}
.侧边栏
{
列表样式：无；
位置：相对位置；
浮动：左；
保证金：0；
填充：0
}
.侧边栏ul li:悬停{
背景：#f6f6f6
}
.侧边栏{
显示：无；
位置：绝对位置；
左：5%；
背景：#fff；
填充：0
}
.侧边栏ul li{
浮动：无；
宽度：200px
}
.侧边栏li ul:悬停
{
显示：块；
}
.侧边栏李a{
填充：5px 8px 8px 15px；
文字装饰：无；
字体大小：22px；
颜色：#4ba6c1；
显示：块；
过渡：0.3s
}
.侧边栏a:悬停，.offcanvas a:焦点{
颜色：#ffffff；
}
.侧边栏.关闭{
位置：绝对位置；
排名：0；
右：10px；
字体大小：20px；
左边距：20px；
}

管理
☰ 菜单

您甚至可以在不使用JavaScript的情况下解决此问题：

<li><a href="#" id="awards">Awards</a>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
    </ul>
</li>

---

您的目标是

。侧边栏li ul:悬停

以显示隐藏的

ul

。这不起作用，因为要悬停的

ul

是隐藏的-如果元素是隐藏的，则无法悬停该元素。相反，您需要以

.sidebar li:hover>ul

为目标，这意味着当您将

li

悬停时，它将显示任何直接的子

ul

函数openNav（）{ document.getElementById（“导航侧栏”）.style.width=“142px”； document.getElementById（“main”）.style.height=“142px”； } 函数closeNav（）{ document.getElementById（“导航侧栏”）.style.width=“0”； document.getElementById（“main”）.style.height=“0”； }

。侧栏{
宽度：0；
列表样式：无；
位置：绝对位置；
身高：100%；
z指数：0；
左：2px；
背景#38424f；
溢出x：隐藏；
过渡：0.5s；
填充顶部：10px；
}
.侧边栏
{
列表样式：无；
位置：相对位置；
浮动：左；
保证金：0；
填充：0
}
.侧边栏ul li:悬停{
背景：#f6f6f6
}
.侧边栏{
显示：无；
位置：绝对位置；
左：5%；
背景：#fff；
填充：0
}
.侧边栏ul li{
浮动：无；
宽度：200px
}
.侧边栏li：悬停>ul
{
显示：块；
}
.侧边栏李a{
填充：5px 8px 8px 15px；
文字装饰：无；
字体大小：22px；
颜色：#4ba6c1；
显示：块；
过渡：0.3s
}
.侧边栏a:悬停，.offcanvas a:焦点{
颜色：#ffffff；
}
.侧边栏.关闭{
位置：绝对位置；
排名：0；
右：10px；
字体大小：20px；
左边距：20px；
}

管理
☰ 菜单

#awards ul{
    display:none;
}

#awards:hover ul{
    display:block;
}