title: Expand vertical menu to the right into a div
body: <p>First time user here.</p>
  
  <p>I have created a vertical menu and i want it to expand (on hover) to the right into a DIV to show an image. The problem is that when the menu expands, the top of the DIV is aligned with the top of the menu element taht is on hover and i want the top of the DIV to align to the top of the first menu element no matter wich element is on hover.</p>
  
  <p>Here's the code i have so far...</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li id="menu-1"&gt;&lt;a href="menu-1.html"&gt;menu-1&lt;/a&gt;
              &lt;div class="nav-expand"&gt;
                  &lt;a href="menu-1"&gt;&lt;img src="img/1.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="menu-2"&gt;&lt;a href="menu-2.html"&gt;menu-2&lt;/a&gt;
              &lt;div class="nav-expand"&gt;
                  &lt;a href="menu-2"&gt;&lt;img src="img/2.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li id="menu-3"&gt;&lt;a href="menu-3.html"&gt;menu-3&lt;/a&gt;
              &lt;div class="nav-expand"&gt;
                  &lt;a href="menu-3"&gt;&lt;img src="img/3.png"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>nav {
  float:left;
  width:192px;
  }
  nav li {
  position:relative;
  display:block;
  width:176px;
  height:29px;
  margin-bottom:1px;
  background:#EEE;
  }
  nav li:last-child {
  height:30px;
  }
  nav li:hover {
  background:#09B2B3;
  width:192px;
  -webkit-transition:all .3s ease;
     -moz-transition:all .3s ease;
       -o-transition:all .3s ease;
          transition:all .2s ease;
  }
  .nav-expand {
  display:none;
  background:#FFF;
  border:2px solid #09B2B3;
  position:absolute;
  left:192px;
  top:0;
  z-index:1001;
  width:556px;
  height:356px;
  overflow:hidden;
  }
  #navigation .nav-expand a {
  margin-left:0;
  display:block;
  width:560px;
  height:360px;
  }
  .nav-expand {
  width:556px;
  height:356px;
  }
  nav li:hover &gt; .nav-expand {
  display:block;
  }
  </code></pre>
  
  <p>I realized that i could use a different class for every element of the menu and use an absolute position, but was wondering if there's a better way to do it.</p>