Dropdown hover doesn't stay still

Question

I'm trying to make this dropdown menu happen in a fixed top bar.
I've look through lots of tutorials and forums, but nothing helped me.

I can't:

1. Make the dropdown still when I get the cursor off from the "Trabalhos" button.
2. Make the top bar elements still when the submenu shows - the button "Contato" get out of the bar as if it's floating.

Here is the code in CSSDesk (please hide the html/css sidebar so you can see the major problem: many on/off hover blinks when the cursor pass around the "Trabalhos" button).

I'm in the very beginning, so I'm sorry if my code is messy (if it really is, please tell me!)

#fixtop {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  position: relative;
}

#fixtop>ul {
  margin: 10px auto;
  color: white;
  font-size: 1.5em;
  display: table;
  list-style: none;
}

#fixtop>ul>li {
  padding: 0 90px 0 90px;
  cursor: default;
  transition: 0.2s;
  float: left;
}

#fixtop>ul>li>a:hover {
  color: yellow;
  transition: 0.2s;
}

#topbuttons #bottrab:hover~#submenu {
  display: table;
}

/*SUBMENU AREA*/

#submenu {
  position: relative;
  display: none;
}

#submenu>a {
  padding: 10px;
  position: relative;
  top: 50px;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 3;
  border-radius: 2px;
}

#submenu>nav>a:hover {
  background: rgba(0, 0, 0, 0.7);
  transition: 0.2s;
}

<header id="fixtop">
  <ul id="topbuttons">
    <li><a href="#">Sobre mim</a></li>
    <li><a href="#" id="bottrab">Trabalhos</a>
      <div id="submenu">
        <a href="#">Manipulação de imagem</a>
        <a href="#">Diagramação</a>
        <a href="#">Programação Web</a>
        <a href="#">Design de logo</a>
      </div>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</header>

Answer 1

Since the submenu is a child of a main menu element, it expands the size of that main menu element when it appears. Consequently, the menu item moves away from the mouse cursor. When it does, the submenu closes and the main menu item moves back under the mouse cursor. This cycle causes a vibration between hover and non-hover states.

One solution is to set the submenu to be position:absolute so that it's removed from the document flow. But this also means that the hover area for the main menu item will not include the area of the submenu, so the submenu will close when the mouse is moved away from the main menu item. To solve this, I've added another :hover definition on the #submenu element itself.

#submenu {
  position: absolute;
  display: none;
}

#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
  display: table;
}

Working example below:

#fixtop {
  width: 100%;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.3);
  float: left;
  position: relative;
}

#fixtop ul {
  padding: 0;
  margin: 10px 0;
  color: white;
  font-size: 1.2em;
  display: table;
  list-style: none;
}

#fixtop ul li {
  padding: 0 20px;
  cursor: default;
  transition: 0.2s;
  float: left;
}

#fixtop ul li>a:hover {
  color: yellow;
  transition: 0.2s;
}

#topbuttons #bottrab:hover~#submenu,
#submenu:hover {
  display: table;
}


/*SUBMENU AREA*/

#submenu {
  position: absolute;
  display: none;
}

#submenu a {
  padding: 10px;
  position: relative;
  top: 18px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  z-index: 3;
  border-radius: 2px;
}

#submenu a:hover {
  background: rgba(0, 0, 0, 0.7);
  transition: 0.2s;
}

<header id="fixtop">
  <ul id="topbuttons">
    <li><a href="#">Sobre mim</a></li>
    <li><a href="#" id="bottrab">Trabalhos</a>
      <div id="submenu">
        <a href="#">Manipulação de imagem</a>
        <a href="#">Diagramação</a>
        <a href="#">Programação Web</a>
        <a href="#">Design de logo</a>
      </div>
    </li>
    <li><a href="#">Contato</a></li>
  </ul>
</header>