将垂直菜单向右展开为div。

Question

第一次在这里使用。

我已经创建了一个垂直菜单，我希望它(在悬停时)向右扩展到一个DIV以显示图像。问题是，当菜单扩展时，DIV的顶部与菜单元素taht的顶部对齐，而我希望DIV的顶部与第一个菜单元素的顶部对齐，而不管是否处于悬停状态。

这是我到目前为止的密码。

<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>

和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;
}

我意识到我可以对菜单中的每个元素使用不同的类，并使用绝对位置，但我想知道是否有更好的方法。

Answer 1

我认为您可以从您的.nav li中删除“位置:相对人”，并将其添加到.nav ul中。

.nav > ul{
position: relative;
}

Answer 2

有更好的方法来做这比你已经接近的方式。

实际上，菜单-1，2，3都是相对定位的，导航展开是绝对定位的.

这是工作代码

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;
}