HTML CSS add dropdown menu - html

Question

I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.

Answer 1

I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}