将右侧的垂直菜单展开为div

Question

First time user here.

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.

Here's the code i have so far...

<nav>
    <ul>
        <li id="menu-1"><a href="menu-1.html">menu-1</a>
            <div class="nav-expand">
                <a href="menu-1"><img src="img/1.png"></a>
            </div>
        </li>
        <li id="menu-2"><a href="menu-2.html">menu-2</a>
            <div class="nav-expand">
                <a href="menu-2"><img src="img/2.png"></a>
            </div>
        </li>
        <li id="menu-3"><a href="menu-3.html">menu-3</a>
            <div class="nav-expand">
                <a href="menu-3"><img src="img/3.png"></a>
            </div>
        </li>
    </ul>
</nav>
</body>

and the CSS

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 > .nav-expand {
display:block;
}

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.

Answer 1

I think you can remove the 'position: relative' from your .nav li and add it to .nav ul.

.nav > ul{
position: relative;
}

Answer 2

There are better ways of doing this then the way you have approached.

Actually, menu-1, 2, 3 are all positioned relative and the nav-expand is positioned absolute.

Here's the working code

CSS:

nav {
float:left;
width:192px;
}
nav li {
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 {
background:#FFF;
border:2px solid #09B2B3;
position:absolute;
left:240px;
top:24px;
z-index:1001;
width:556px;
height:356px;
overflow:hidden;
display:none;    
}
#navigation .nav-expand a {
margin-left:0;
display:block;
width:560px;
height:360px;
}
.nav-expand {
width:556px;
height:356px;
}
nav li:hover > .nav-expand {
display:block;
}