Question

`<ul id="main-nav">
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -80px;">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -160px;">
        <p>Anything</p>
   </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -240px;">
        <p>Anything</p>
    </div>
</li>
<li>
    <a href="#">Menu item</a>
    <div class="sub-nav" style="left: -320px;">
        <p>Anything</p>
    </div>
</li>

`

我希望能够将内容放入div（链接，图像，文本等）。我试图使div框的大小与导航栏的大小相同，特别是1050px的宽度（我希望导航栏和div框的宽度为1050px）。当用户将鼠标悬停在导航栏中的某个链接上时，我希望div框显示其内部的所有内容。

这就像它：http://jsfiddle.net/ELyQW/2/〜（但如果仔细观察，你可以看到每个新链接上的框都会移动，我不想发生。）

请查看本网站上的导航栏以获得类似参考。 pacsun

非常感谢你的帮助！

如果你帮我创建一个新栏我强烈建议你不要使用我发布的jsfiddle，但是如果你必须去做！再次感谢你！

Answer 1

您可以尝试固定位置而不是绝对位置。然后左右正确定位div和ul，你就可以实现它。这是sample

.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}

Answer 2

你的成功！

http://jsfiddle.net/hjZz9/1/

<div id="main-menu-container">
    <ul id="main-menu">
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
        <li>
            <a href="#">Main menu</a>
            <div class="sub-menu">
                Testing 123
            </div>
        </li>
    </ul>
</div>

#main-menu-container {
    position: relative;
}
#main-menu {
    margin: 0; padding: 0;
    list-style: none;
}
#main-menu li {
    float: left;
    margin-right: 15px;
}
#main-menu li:hover .sub-menu {
    display: block;
}
.sub-menu {
    display: none;
    position: absolute;
        left: 0; right: 0;
    padding: 10px;
    background-color: #eee;
}

修改：我已将right: 0;添加到.sub-menu，只是因为它从头到尾延伸，您当然可以根据自己的喜好进行更改。

我需要帮助创建导航栏？将鼠标悬停在链接上以显示一个大的div框？

2 个答案: