How to make it so that an element is shown when I hover over a different header item [duplicate]

I am unable to create a header bar that shows a login form when you hover over the login button. I have tried many other guides but none have worked. Here is my code:

* Edit *
First question on stackoverflow and I just can't get it to work using those other examples. Perhaps someone could provide an example using my code?
* *

HTML:

<nav>
  <ul>
    <li id='loginForm'><a>
      <form action='encrypt.php' method='post'>
        <input type="text" name="loginUsername" placeholder="Username:">
        <input type="text" name="loginPassword" placeholder="Password:">
      </form>
    </a></li>
    <li id='loginItem'><a>Login</a></li>
    <li><a href='register.php'>Register</a></li>
    <li><a>Privacy</a></li>
  </ul>
</nav>

CSS:

#loginForm {
  display: none;
}
#loginItem + #loginForm {
  display: list-item;
}