title: CSS: Hover one element, and create two boxes?
body: <p>I am learning HTML/CSS for school.
  I wanted to create a bar menu that if someone hover one button shows the blue bar (see snippet) <strong>and</strong> it creates below a Box for a Dropdownmenu. The Problem I get it only to work for one object the second one gets ignored even if I put my second object into  so that both balken and Dconfig are directly under the button-class.</p>
  <p>I really dont know how to solve it and it.
  I hope you can help me :)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {    
      background-color: black;
      height: 70px;
      width: 100%;  
  }   
  
  /*ButtonsCSS*/
  
  .button{   
      height: 73px;
      top: -2px;
      background-color: transparent;
      background-repeat:no-repeat;
      border-color: transparent;
      cursor:pointer;
      overflow: hidden;
      outline:none;
     
      font-family:Arial, Helvetica, sans-serif ;
      font-size: 12pt;
      color: white;
      position: absolute;
  }
  
  .balken{
      opacity: 1; 
  }
  
  .button:hover + .balken{
      background-color:  rgba(108, 155, 243, 0.945);
      height: 4px;
   
      position: absolute;
      top: 66px;
  }
  
  
  .UeberCG{   
      left: 470px;
      border-right-width: 17px;
  }
  .balkenUeberCG{
      width: 80px;
      /**/
      left: 475px;
  }
  
  /*DropdownCSS*/
  
  
  .Dconfig{
      opacity: 1;
  }
  .button:hover + .Dconfig{
      background-color: rgb(223, 217, 217);
      width: 300px;
      height: 300px;
     
      position: absolute;
      top:70px;
  }
  
  .DUeberCG{
  left: 470px;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="de"&gt;
  
  
  &lt;body&gt;
    &lt;header&gt;      
  
      &lt;div class="Buttons"&gt;          
        &lt;button class="button UeberCG"&gt;Über CG&lt;/button&gt;
        &lt;div class="balken balkenUeberCG"&gt;&lt;/div&gt;
      &lt;/div&gt;    
  
      &lt;div class="Dropdownmenue"&gt;
          &lt;div class="Dconfig DUeberCG"&gt;&lt;/div&gt;  
          &lt;div class="Suchleiste"&gt;&lt;/div&gt;         
      &lt;/div&gt;
  
        &lt;/header&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>