title: How can show content in another class?
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Page Title&lt;/title&gt;
  &lt;style&gt;
  .left {
  background-color:pink;
      min-width: 10%;
      max-width: 10px;
      min-height: 700px;
      max-height: 90%; 
      float: left;
      overflow: hidden;
      margin-left: 15px;
      margin-right: 25px;
      position: fixed;
  }
  .right {
    min-height: 800px;
    max-height: 80%;   
    min-width: 76%;   
    max-width: 980px;
    float: right;
    margin-right: 30px;
    margin-left: 30px;
    position: relative;
  } 
  .drp {display:none; background-color:grey; width:100px; height:100px;}
  .navbar:hover .drp {display:block;}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="main"&gt;
    &lt;div class="left"&gt;
      &lt;div class="navbar"&gt;
          &lt;button&gt;hover&lt;/button&gt;
          &lt;div class="drp"&gt;
          &lt;ul&gt;
          &lt;li&gt;link 1&lt;/li&gt;
          &lt;li&gt; link2 &lt;/li&gt;
          &lt;li&gt; link 3 &lt;/li&gt;
          &lt;li&gt; link 4 &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div&gt;
      &lt;/div&gt;
    &lt;/div &gt;
    &lt;div class="right"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>when hover on div "navbar" it's shows the content but it is not showing whole content . It's hidden inside parent class because size of parent class is smaller than content. </p>
  
  <p>So how can i display that content in div "right" ?</p>