title: Vertical dropdown Menu with submenu showing on hover
body: <p>I want to make a vertical dropdown menu with the following structure(for each "button" a different "dropdown" div).The idea is when I hover "button", the "dropdown" to appear <strong>over the "button" with the same size</strong> ( the "dropdown" shrinks to the "button" size with equal heights "subnav1" ) or to appear <strong>left to the "dropdown"</strong> ( again with equal heights "subnav1" ). The problem, however , is that I can't make the "dropdown" <em>display:block</em>s on "button" hover and ,in the second case, the "button" to be hovered while selecting "subnav1" element.
  <strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="nav"&gt;
      &lt;ul class="nav1"&gt;
          &lt;li class="button"&gt;&lt;div class="subnav"&gt;BUTTON1&lt;/div&gt;&lt;/li&gt;
          &lt;li class="button"&gt;&lt;div class="subnav"&gt;BUTTON2&lt;/div&gt;&lt;/li&gt;
          &lt;li class="button"&gt;&lt;div class="subnav"&gt;BUTTON3&lt;/div&gt;&lt;li&gt;
          &lt;li class="button"&gt;&lt;div class="subnav"&gt;BUTTON4&lt;/div&gt;&lt;/li&gt;
          &lt;li class="button"&gt;&lt;div class="subnav"&gt;BUTTON5&lt;/div&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/div&gt;
      &lt;div class="dropdown"&gt;
          &lt;A href="#" class="subnav1"&gt;SUBBUTTON1&lt;/a&gt;
          &lt;A href="#" class="subnav1"&gt;SUBBUTTON1&lt;/a&gt;
          &lt;A href="#" class="subnav1"&gt;SUBBUTTON1&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.nav {
      width: 180px;
      padding: 1vm;
      float:left;
      height:450px;
      position:relative;
      text-align:center;
      background-color:#a56d3b;
  }
  ul{
      list-style:none;
      margin: 0;
      padding: 0;
      text-align:right;
  }
  .nav a{
      text-decoration:none;
  
  }
  .subnav{
      font-weight:bold;
      text-align:center;
      color:#FCFBE3;
      font-family: 'PT Serif', serif;
      font-size:1.3em;
      display:block;
  }
  .button{
      border-bottom:1PX DOTTED #FFECBA;
      border-right:1PX DOTTED #FFECBA;
      height:90px;
      width:100%;
      padding:2em 0 0 0 ;
      cursor:pointer;
  }
  .button:last-child{
      border-bottom:0px;
  }
  .button:hover{
      background-color:rgba(0,0,0,0.5);
  }
  .dropdown{
      height:89px;
      float:left;
      width:auto;
      min-width:100px;
      text-align:center;
      margin:0 180px;
      position:absolute;
      cursor:pointer;
      border:1px solid black;
  
  }
  
  .subnav1{
      height:30px;
      width:180px;
      padding:5px 0;
      color:black;
      font-family: 'PT Serif', serif;
      font-size:1em;
      color:white;
      text-decoration:none;
      background-color:#D8A06E;
          DISPLAY:BLOCK;
  }
  .subnav1:hover{
      background-color:rgba(0,0,0,0.5);
  }
  .nav.nav1 .button:hover .dropdown{
      display:block;
  }
  </code></pre>