title: My css style background-color in a specific situation does not work
body: <p>I've coded this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
              &lt;style&gt;
              .menu-div {
                  position: absolute;
                  top:200px;
                  width:100px;
                  height:20px;
                  background-color: #CBDA90;
                  z-index:10000;
              }
              .menu-div:hover { // Menu div css style
                  background-color: white;
              }
              .second-position-container {
                  position:fixed;
                  width:100%;
                  height:2400px;
              }
              .position-container {
                  width:1333px;
                  height:800px;
                  position: relative;
                  margin-left :auto;
                  margin-right: auto;
              }
              .container {
                  position: relative;
                  margin-left: auto;
                  margin-right: auto;
                  width:1333px;
                  height:800px;
              }
              .side-panel {  
                  position: absolute;
                  top:120px;
                  width: 240px;
                  height:300px;
                  margin-top: 5px;
                  border:4px solid #6C7532;
              }
          
              &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;div class="header"&gt;&lt;/div&gt;
              &lt;div class="menu-div"&gt;&lt;/div&gt;
              &lt;div class="second-position-container"&gt;
                  &lt;div class="position-container"&gt;
                      &lt;div class="side-panel"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="container" id="container-search"&gt;
              &lt;/div&gt;
              &lt;div id="container-sim" class="container"&gt;
                  &lt;div class="tools"&gt;
                  &lt;/div&gt;
                  &lt;div id="image-block" &gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="container" id="container-forum"&gt;&lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my <code>.menu-div:hover</code> style does not work if it is append to the side panel div.I was trying to make, like a menu where when you hover your mouse over the same menu it changes the background color.</p>
  
  <p>But if I append it to the body it works fine.</p>