CSS hover margin-top change does not work when the parent container contains more than one element-CodePudding

I am trying to create a menu bar with elements which move upwards when hovered, but it only works when the parent container contains exactly one element (like in title-bar-right, unlike in title-bar-left). Other properties (the font family in this example) change as expected. I've tried removing the transition duration, but it does not fix the issue. Below is what I believe to be the minimum reproducible example.

#title-bar-left {
  justify-content: left;
  align-items: left;
  float: left;
  height: inherit;
}

#title-bar-right {
  justify-content: right;
  align-items: right;
  float: right;
  height: inherit;
}

.title-bar-element-container {
  height: 100%;
  margin-top: 15px;
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
  transition-duration: 0.3s;
}

.title-bar-element-container:hover {
  margin-top: 10px;
  height: 100%;
  font-family: monospace;
  transition-duration: 0.3s;
}

<div id="title-bar">
  <flex id="title-bar-left">
    <flex >
      <a  href="/main.html">main</a>
    </flex>
    <flex >
      <a  href="/category1.html">Category 1</a>
    </flex>
  </flex>
  <flex id="title-bar-right">
    <flex >
      <a  href="/category2.html">Category 2</a>
    </flex>
  </flex>
</div>

CodePudding user response：

You should try using the "top" property and make the position of the element relative.

In your css file change this:

.title-bar-element-container:hover {
    position: relative;
    top: 10px;
    height: 100%;
    font-family: monospace;
    transition-duration: 0.3s;
}