Make an element move by hovering over another element-CodePudding

I would like to hide the nav element totally from the user. When the user hovers over an icon (in this case, an image), the nav element should slide in from the top of the screen. I thought about a countdown of 0.5 seconds before the animation starts, then 1 second when the nav element moves from its initial position (above the screen) to its final position (at the top of the screen). The nav bar should stay there until the user stops hovering over the icon or the nav bar.

The problem is that my nav element appears in its final position when the icon is hovered - it does not move as it should do. From tests I've done so far, it seems that I cannot move an element when hovering over another, but I hope I'm wrong and that it's possible - I explored an option but it ran the animation in a loop and I could only get it working once, nor moving from location A to location B as it was moving from A to B to A. I tried using margins, paddings, changing height, I browsed many topics from here and other websites, but I could not find a way, probably because my code is a mess. I am learning JS so I am open to all solutions.

Here is my code, as cleaned as possible:

    <header>
        <div >
            <img src="img/mainicon.png" >
            <nav>
                <ul>
                    <li><a  href="#">Half-Life</a></li>
                    <li><a  href="#">Half-Life 2</a></li>
                    <li><a  href="#">Half-Life Alyx</a></li>
                </ul>
            </nav>
        </div>
        <div ></div>
    </header>

.mainicon {
    width: 8%;
    margin-left: 2%;
    margin-top: 2%;
    float: left;
}

.mainicon:hover   nav {
    display: flex;
    margin-top: 0px;
}

nav:hover {
    display: flex;
    margin-top: 0px;
}

.clean{
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

nav {
    height: 100px;
    display: none;
    justify-content: center;
    align-items: center;
    border: 4px solid #2CBCD6;
    background-color: grey;
    text-align: center;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
  font-size: 25px;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 20%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

CodePudding user response：

It's simpler than you think. Don't complicate it for yourself.

In short, all you need to do is set the margin-top to something negative to hide it and then margin-top to 0 when hovering over the image or the menu.

Here is a demonstration:

body {
  margin: 0;
  background-color: aqua;
}

.thing {
  display: flex;
  align-items: center;
}
.mainicon {
  position: fixed;
  margin-top: 0px;
  top: 10;
  left: 60px;
  height: 40px;
  width: auto;
  object-fit: contain;
  background-color: bisque;
}
.mainicon:hover   nav,
nav:hover {
  margin-top: 0px;
}

nav {
  background-color: grey;
  display: flex;
  height: 60px;
  width: 100%;
  justify-content: center;
  align-items: center;

  margin-top: -60px;
  transition: all 0.3s ease-in-out;
}

ul {
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  list-style-type: none;
  width: 100px;
}

a {
  outline: none;
  text-decoration: none;
}

<header>
  <div >
    <img
      src="https://cdn1.iconfinder.com/data/icons/heroicons-ui/24/menu-512.png"
      
    />
    <nav>
      <ul>
        <li><a  href="#">Half-Life</a></li>
        <li><a  href="#">Half-Life 2</a></li>
        <li><a  href="#">Half-Life Alyx</a></li>
      </ul>
    </nav>
  </div>
</header