Html 幻灯片导航栏菜单不以全宽显示

我有一个幻灯片导航栏，当我将鼠标悬停在第一个选项“模块”上时，它下面的菜单不会以全宽显示， 另一件事，我需要这个菜单出现时，我点击“模块不悬停我怎么能做到这一点。”。

我试着做到以下几点：

.navigation_selection ul li:hover > ul  {
  opacity:1;
  visibility:visible;
  position:absolute;
  width:500px;
  white-space :nowrap;
  background-color:red;
  overflow:visible;
 }

---

您在

侧边栏菜单上有
溢出：隐藏
，这会导致悬停项目的溢出宽度隐藏。
您在
侧边栏菜单上有
溢出：隐藏
，这会导致悬停项目的溢出宽度隐藏。
规则
。侧边栏菜单有
溢出：隐藏
h导致子菜单被剪裁

要使用鼠标单击进行切换，可以使用jQuery，如下所示


$（文档）.ready（函数（）{
$（“.navigation\u selection>ul>.navigation\u item”）。单击（函数（）{
this.classList.toggle（“活动”）；
});
})；
.iframe{
宽度：1000px；
身高：90%；
位置：绝对位置；
左：310px；
}
.身体{
位置：相对位置；
}
.酒吧{
背景色：黑色；
宽度：30px；
高度：3倍；
保证金：3倍；
}
.集装箱{
宽度：75px；
位置：绝对位置；
填充：15px 20px 15px 15px；
颜色：白色；
光标：指针；
背景色：#648b79；
z指数：100000；
字号：2em；
}
.侧边栏菜单{
位置：绝对位置；
宽度：250px；
身高：90%；
左边距：0px；
背景色：rgba（17,17,17,0.9）；
不透明度：0.9；
过渡：所有0.3秒的缓进缓出；
}
.x{
右：10px；
字号：18px；
边缘顶部：10px；
不透明度：0.7；
光标：指针；
位置：绝对位置；
颜色：白色；
过渡：所有0.3秒的缓进缓出；
}
.x:悬停{
不透明度：1；
}
.navText{
宽度：200px；
字体系列：“开放式SAN”；
字号：200；
填充：10px；
20px；
显示：内联块；
边框：纯色2px白色；
框大小：边框框；
字号：18px；
颜色：白色；
文本对齐：居中；
利润上限：70像素；
}
.表格{
字号：800；
}
.导航选择ul li{
利润率：0.20px；
显示：块；
宽度：200px；
列表样式类型：无；
位置：相对位置；
字号：200；
字体系列：“开放式SAN”；
填充：12px0；
框大小：边框框；
字体大小：14px；
颜色：#D8D8D8；
边框底部：实心1px#d8d8；
过渡：所有0.3秒的缓进缓出；
光标：指针；
}
.导航选择ul li a{
颜色：#D8D8D8；
文字装饰：无；
字号：500；
字号：18px；
字体系列：“开放式SAN”；
}
.导航选择{
不透明度：0；
可见性：隐藏；
过渡：所有0.3秒的缓进缓出；
位置：绝对位置；
左：100px；
}
.navigation\u item.active>ul{
不透明度：1；
能见度：可见；
位置：绝对位置；
宽度：500px；
空白：nowrap；
背景色：红色；
溢出：可见；
}
.登录{
字体大小：12px；
颜色：白色；
宽度：200px；
过渡：所有0.3秒的缓进缓出；
光标：指针；
边框：2倍纯白；
保证金：20px 0 20px 0；
填充：10px0；
字号：18px；
字号：900；
字体系列：“开放式SAN”；
}
.登录：悬停{
背景色：白色；
颜色：#111；
过渡：所有0.3秒的缓进缓出；
}
.注销{
字体大小：12px；
颜色：白色；
宽度：200px；
过渡：所有0.3秒的缓进缓出；
光标：指针；
边框：2倍纯白；
保证金：20px 0 20px 0；
填充：10px0；
字号：18px；
字号：900；
字体系列：“开放式SAN”；
}
。注销：悬停{
背景色：白色；
颜色：#111；
过渡：所有0.3秒的缓进缓出；
}
.隐藏菜单{
左边距：-350px；
过渡：所有0.3秒的缓进缓出；
}
1{
不透明度：1；
过渡：所有0.3秒的缓进缓出；
}

X
导航表
登录






















规则
.sidebar_菜单
有
溢出：隐藏
，导致子菜单被剪裁

要使用鼠标单击进行切换，可以使用jQuery，如下所示


$（文档）.ready（函数（）{
$（“.navigation\u selection>ul>.navigation\u item”）。单击（函数（）{
this.classList.toggle（“活动”）；
});
})；
.iframe{
宽度：1000px；
身高：90%；
位置：绝对位置；
左：310px；
}
.身体{
位置：相对位置；
}
.酒吧{
背景色：黑色；
宽度：30px；
高度：3倍；
保证金：3倍；
}
.集装箱{
宽度：75px；
位置：绝对位置；
填充：15px 20px 15px 15px；
颜色：白色；
光标：指针；
背景色：#648b79；
z指数：100000；
字号：2em；
}
.侧边栏菜单{
位置：绝对位置；
宽度：250px；
身高：90%；
左边距：0px；
背景色：rgba（17,17,17,0.9）；
不透明度：0.9；
过渡：所有0.3秒的缓进缓出；
}
.x{
右：10px；
字号：18px；
边缘顶部：10px；
不透明度：0.7；
光标：指针；
位置：绝对位置；
颜色：白色；
过渡：所有0.3秒的缓进缓出；
}
.x:悬停{
不透明度：1；
}
.navText{
宽度：200px；
字体系列：“开放式SAN”；
字号：200；
填充：10px；
20px；
显示：内联块；
边框：纯色2px白色；
框大小：边框框；
字号：18px；
颜色：白色；
文本对齐：居中；
利润上限：70像素；
}
.表格{
字号：800；
}
.导航选择ul li{
利润率：0.20px；
显示：块；
宽度：200px；
列表样式类型：无；
位置：相对位置；
字号：200；
字体系列：“开放式SAN”；
填充：12px0；
框大小：边框框；
字体大小：14px；
颜色：#D8D8D8；
边框底部：实心1px#d8d