Html 我的深层菜单不能正常工作

我希望我的深度菜单位于下拉菜单的右侧。仅与position:relative一起显示，悬停链接下有一个空格。将其更改为位置：绝对不显示任何内容。我也试着把菜单移到左边，但也没用

这是我的

HTML:

---

这个CSS将把菜单放到右边

---

“我希望我的深度菜单位于下拉菜单的左侧”这是什么意思？此下拉列表位于窗口的左边缘。如果嵌套子菜单位于下拉列表的左侧，它将位于窗口视口之外？在右侧，mewow不知道我必须将它们放在悬停元素中。。。尝试在ul或下拉内容2类中添加所有这些内容。非常感谢@ValentinDragoi您真正需要包含在hover元素中的惟一内容是

display:block；不透明度：1；能见度：可见。其余的都可以是菜单样式，但是你有很多重复的CSS，所以我只是把它放在我能保持简单的地方。但是，如果需要，可以将顶部/左侧/变换/位置/边距移动到悬停选择器的外部。
<div class="wrapper">
    <ul class="navbar">
        <li class="dropdown"><hr id="tab1"/><a href="#">Models</a>
            <ul class="dropdown-content">
                <li><a href="#">911<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a>
                    <ul class="dropdown-content2">
                        <li><a href="#">Link 1</a></li>
                    </ul>
                </li>
                <li><a href="#">Panamera<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a></li>
                <li><a href="#">Cayenne<i class="fa fa-chevron-right fa-fw" style="float:right;margin-top:2px;" aria-hidden="true"></i></a></li>
            </ul>
        </li>
        <li><hr id="tab2"/><a href="#">News</a></li>
        <li><hr id="tab3"/><a href="#">Contact</a></li>
        <li><hr id="tab4"/><a href="#">Generations</a></li>
    </ul>
</div>

    .navbar {
        text-align:center;
        margin-top: 0px;
        padding: 0;
        background-color: white;
        position: absolute;
        z-index:200;
        box-shadow:1px 2px 2px rgba(0,0,0,0.3);
ul {
    list-style-type: none;
    position:relative;
    padding:0;
    width: 100%;
    background-color: white;
}
    }
    ul ul{
        visibility: hidden;
        margin-left:10px;
        width:200px;
        box-shadow: 7px 4px 10px rgba(0,0,0,0.3);
        z-index:-1;
        position:absolute;
        transform: translateY(-3em);
        opacity:0;
        transition: 0.6s;
    }
    ul ul li {
        float:none;
        width:200px;
    }
    ul ul li a{
        text-decoration: none;
        display:block;
        position:relative;
        font-family: 'Open Sans', serif;
        color:black;
        text-align:left;
        font-weight: bold;
        border-top:0.5px solid #d8d8d8;
        transition: 0.6s;
    }
    li:hover:nth-child(1) .dropdown-content{
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
        transition: 0.6s;
    }
    .dropdown-content li a:hover{
        background-color: #9f111d;
        color:white;
        border-color: #9f111d;
        transition:0.6s;
    }
    ul ul ul {
        top:0;
        left:100%;
        float:none;
    }
    .dropdown-content2{
        display: none;
        position:relative;
        color:black;
        box-shadow: 7px 4px 10px rgba(0,0,0,0.3);
    }
    .dropdown-content li:hover:nth-child(1) > ul{   
        display:block;
    }

.dropdown-content li:hover:nth-child(1) > ul {
  /* you already had this rule */
  display:block;

  /* added these styles below */
  opacity: 1;
  visibility: visible;
  top: 0;
  left: 100%;
  transform: translate(0);
  position: absolute;
  margin: 0;
}