HTML CSS добавить выпадающее меню

У меня есть меню и подменю из одного из элементов. Код здесь: http://jsfiddle.net/mq5g6upe/. Я хотел бы, чтобы вы сказали мне, как реализовать вертикальное выпадающее меню из элемента Мой проект, потому что сейчас это не кажется нормальным.

заголовок.html

    <header>
  <div class = "main">
    <ul>
      <li><a href = "/home">Home</a></li>
      <li><a href = "/projects">My projects</a>
        <ul class = "my-projects-dropdown">
          <li><a href = "/projects/endlessblow">Endless Blow</a>
          <li><a href = "#">Sub-2</a></li>
          <li><a href = "#">Sub-3</a></li>
        </ul>
      </li>
      <li><a href = "https://play.google.com/store/apps/dev?id=6173561253714763017">My Google Play link</a></li>
      <li><a href = "/about">About</a></li>
      <li><input type = "submit" class = "a-login" value = "Login" (click) = "navigateToLogin()"></li>
    </ul>
  </div>
</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;
}

Теперь есть три проблемы. Сначала кажется, что подменю элементов перекрывается другими элементами. Во-вторых, есть расстояние между элементом меню Мои проекты и первым элементом подменю. Третий внешний jsfiddle в производстве (https://jakuwegiel.web.app/home), также подменю перемещено немного вправо.