Html 我希望在将鼠标悬停在该子菜单项上后，在右侧显示另一个子菜单（第二级）

我有一个菜单和子菜单下的网站，我需要显示第二级子菜单后，在第一级子菜单项目的权利悬停，我如何才能做到这一点？ 我在我的子菜单项下添加了另一个UL，但在子菜单项下显示了这个UL，我试图隐藏它，然后用鼠标悬停显示它们，但它没有出现。我不熟悉CSS语法，请提供帮助。 谢谢

编辑：现在，在添加了一些塔希尔·伊克巴尔建议的css后，它会显示第二级子菜单，但它会向下显示“一级”，我会附加屏幕。

这是我的密码

。主菜单ul.navbar-nav li{
浮动：左；
位置：相对位置；
}
.主菜单ul.navbar-nav>li>a{
背景：rgba（0,0,0,0）无重复滚动0；
颜色：#444；
字体大小：13px；
字号：500；
填充：36px 0px；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
利润率：0px 15px；
}
.主菜单ul.navbar-nav li a：悬停{
颜色：#FFA100；
}
.主菜单ul.navbar-nav>li:hover>a:before..主菜单ul.navbar-nav>li.active>a:：before{
宽度：100%；
}
.主菜单ul.navbar-nav li.active a:焦点{
颜色：#333；
}
.主菜单ul.navbar-nav li.active a{
背景：rgba（0,0,0,0）无重复滚动0；
颜色：#FFA100；
位置：相对位置；
z指数：999999；
}
navbar先生{
边界：中等无；
页边距底部：0；
}
.navbar默认值{
背景：rgba（0,0,0,0）无重复滚动0；
}
.主菜单ul.navbar-default.navbar nav>.active>a、.navbar default.navbar nav>.active>a:hover、.navbar default.navbar nav>.active>a:focus{
背景：无；
颜色：#333；
}
.navbar默认值.navbar导航>li>a:悬停.navbar默认值.navbar导航>li>a:焦点{
背景色：透明；
颜色：#fff；
}
.navbar默认值.navbar切换：悬停.navbar默认值.navbar切换：焦点{
背景：无；
}
.主菜单ul.nav li ul.子菜单{
背景：#fff；
边框顶部：2个实心#FFA100；
左：0；
不透明度：0；
位置：绝对位置；
最高：115%；
转换：所有0.3秒到0秒；
可见性：隐藏；
宽度：220px；
z指数：-99；
}
.佩吉斯{
位置：相对位置；
}
.navbar.navbar-default{
浮动：对；
}
.主菜单ul.nav li ul.sub-menu li{
边框底部：1px实心#ddd；
填充：0；
位置：相对位置；
宽度：100%；
}
.主菜单ul.nav li：悬停ul.子菜单{
最高：92%；
不透明度：1；
z指数：999；
能见度：可见；
}
.主菜单ul.nav li ul.sub-menu li a{
颜色：#444；
显示：块；
字体大小：12px；
字号：500；
填充：10px 15px；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
}
.主菜单ul.nav li:悬停ul.子菜单li a:悬停{
颜色：#FFA100；
}
.主菜单ul.nav li ul.子菜单li:最后一个子菜单{
边界：无；
}
.主菜单ul.子菜单ul{
显示：无；
位置：绝对位置；
左-100%；
排名：0；
}
.主菜单ul.子菜单li:悬停>ul{
显示：块；
左：100%；
}

这就是我为你所做的我希望它能帮助你

。主菜单ul.navbar-nav li{
浮动：左；
位置：相对位置；
保证金：0；
过渡：背景
}
.主菜单ul.navbar-nav>li>a{
背景：rgba（0,0,0,0）无重复滚动0；
颜色：#444；
字体大小：13px；
字号：500；
填充：36px 0px；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
利润率：0px 15px；
}
.主菜单ul.navbar-nav>li:hover>a:before..主菜单ul.navbar-nav>li.active>a:：before{
宽度：100%；
}
.主菜单ul.navbar-nav li.active a:焦点{
颜色：#333；
}
navbar先生{
边界：中等无；
页边距底部：0；
}
.navbar默认值{
背景：rgba（0,0,0,0.13）无重复滚动0；
}
.主菜单ul.navbar-default.navbar nav>.active>a、.navbar default.navbar nav>.active>a:hover、.navbar default.navbar nav>.active>a:focus{
背景：无；
颜色：#333；
}
.navbar默认值.navbar导航>li>a:悬停.navbar默认值.navbar导航>li>a:焦点{
背景色：透明；
颜色：#fff；
}
.navbar默认值.navbar切换：悬停.navbar默认值.navbar切换：焦点{
背景：无；
}
.主菜单ul.nav li ul.子菜单{
背景：#fff；
边框顶部：2个实心#FFA100；
左：0；
右：0；
浮动：对；
边际上限：0；
填充：0；
不透明度：0；
位置：绝对位置；
最高：115%；
转换：所有0.3秒到0秒；
可见性：隐藏；
宽度：300px；
z指数：-99；
}
.佩吉斯{
位置：相对位置；
}
.navbar.navbar-default{
浮动：对；
}
.主菜单ul.nav li ul.sub-menu li{
边框底部：1px实心#ddd；
填充：0；
位置：相对位置；
宽度：100%；
}
.主菜单ul.nav li：悬停ul.子菜单{
最高：92%；
不透明度：1；
z指数：999；
能见度：可见；
}
.主菜单ul.nav li ul.sub-menu li a{
颜色：#444；
显示：块；
高度：36px；
字体大小：11px；
字号：500；
填充：10px 15px；
文本转换：大写；
字体系列：“蒙特塞拉特”，无衬线；
边界：0；
边框底部：1px实心rgba（255255,0.05）；
过渡：所有.17秒轻松；
线高：36px；
框大小：边框框；
保证金：0；
}
.主菜单ul.nav li:悬停ul.子菜单li a:悬停{
颜色：#FFA100；
}
.主菜单ul.nav li ul.子菜单li:最后一个子菜单{
边界：无；
}
李{
列表样式：无；
}
a{
文字装饰：无；
}
.主菜单ul>li>ul>li{
显示：块；
}
.主菜单#主菜单导航>李>a{
文本转换：大写；
字号：700
}
.主菜单.子菜单li>ul{
位置：绝对位置；
浮动：对；
右：300px；
顶部：-2px；
宽度：180px；
背景色：#fff；
z指数：99999；
边际上限：0；
填充：0；
边框顶部：2个实心#FFA100；
可见性：隐藏；
不透明度：0；
}
.主菜单ul>l
     .main-menu ul.nav li ul.sub-menu ul.sub-menu {
        display: none;
        top: -2px;
        left: 100%;
      }
      .main-menu ul.nav li ul.sub-menu li:hover > ul {
        display: block;
      }