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中删除'position：relative'并将其添加到.nav ul。

.nav > ul{
position: relative;
}

Answer 2

有更好的方法可以按照您接近的方式执行此操作。

实际上，菜单-1,2,3都是相对定位的，导航扩展位于绝对位置。

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

将垂直菜单向右展开为div

2 个答案: