How to create drop menu from every li? - css

Question

I have a problem with dropmenu. I created dropmenu from li:YOU and I want to create dropmenu from li: VIEW and HELP, but every dropmenu is below YOU. I don't know what I should to do that every dropmenu was below YOU, VIEW and HELP. I tried many ways but everything failed. And I have ask, I want to pubblish my question but show information that I have to add more detail.
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body {
text-align: center;
background: #e0e0e0;
padding-bottom: 200px;
}
nav{
height:100px;
display:flex;
font-size:15px;
align-items:center;
justify-content:center;
text-transform:uppercase;
background-color:blue;
width:100%;
position:relative;
}
nav ul{
display:flex;
}
nav ul li{
list-style:none;
}
nav ul li a{
text-decoration:none;
color:black;
position:relative;
letter-spacing:2px;
padding:20px 20px;
margin:20px 0;
font-weight:bold;
background-color:green;
}
.dropOut .triangle{
width:0;
height:0;
position:absolute;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid red;
top: -8px;
left: 50%;
margin-left: -8px;
}
.dropdownContain{
width:160px;
position:absolute;
margin-top:20px;
left:50%;
margin-left: -80px;
}
.dropOut{
width:160px;
background-color:yellow;
position:relative;
opacity:0;
}
.dropOut ul {
text-align:center;
padding: 10px 0;
display:block;
}
.dropOut ul li {
text-align: center;
width:160px;
padding: 12px 0 10px 0;
margin: 0px ;
color: red;
}
.dropOut ul li:hover {
background: #0D74FB;
}
nav ul li a:hover{
color:white;
}
ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
<nav>
<ul>
<li>View</li>
<li>You
<div class="dropdownContain">
<div class="dropOut">
<div class="triangle"></div>
<ul>
<li>Plan</li>
<li>Gallery</li>
<li>Contact</li>
<li>f1</li>
</ul>
</div>
</div>
</li>
<li>Help <div class="dropdownContain1">
<div class="dropOut">
<div class="tringle"></div>
<ul>
<li>Plan</li>
<li>Service</li>
<li>Contact</li>
<li>gallery</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>