Mein tiefes Menü funktioniert nicht richtig

Question

Ich möchte, dass mein tiefes Menü auf der rechten Seite des Dropdown-Menüs angezeigt wird. Nur mit position: relativ zeigt es etwas, das ein Leerzeichen unter dem schwebenden Link ist. Ändere das in Position: absolut nichts erscheint. Ich habe auch versucht, das Menü ganz nach links zu verschieben, aber das hat auch nicht funktioniert.

Hier ist mein jsfiddle

HTML:

<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> 

CSS:

.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; 
    } 

Answer 1

Diese CSS wird das Menü auf der rechten Seite setzen. https://jsfiddle.net/t9u0u8ax/2/

.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; 
}