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

`

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

这有点像：~但如果你仔细观察，你可以看到盒子在每一个新的链接上移动，这是我不希望发生的

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

非常感谢你的帮助

如果你真的帮我创建了一个新的酒吧，我强烈建议你不要使用我发布的JSFIDLE，但是如果你必须这样做的话！

---

再次感谢您

您可以尝试固定位置而不是绝对位置。然后将div和ul正确定位在左侧，您将实现它。这是一个

太成功了

---

编辑：我添加了权限：0；“to.sub”菜单只需将其从一端延伸到另一端，您当然可以根据自己的喜好进行更改。

对我来说有意义的是设置位置：相对；在主导航上，而不是在元素上。。。但这个问题仍然存在。有趣的巧合是，我正试图为一个客户的网站解决同一个问题，我一直在寻找解决这个问题的方法，但到目前为止，没有任何实际帮助。Sumshin you's loking>@adamj我实际上做的是改变样式=左：-160px；在我用不同的浏览器（如InternetExplorer）打开我的网站之前，每种浏览器都工作得很好。我意识到左边的边距不再精确了。。。但我的意思是你应该试试看这个问题是否发生在你身上。这可能对你有用。@user3308895呵呵，伟大的人都是这样想的。在使用jsFiddle时得出了相同的结论，但我只是想提出相同的建议。虽然这会很糟糕，因为你必须有固定宽度的主菜单元素：@HarshShah如果你仔细看问题仍然存在，当你将鼠标悬停在除第一个元素之外的任何元素上时，子菜单仍然会向右漂移2或3个像素。也感谢你的帮助，我很感激@欢迎使用3308895。一石二鸟，我终于可以为我的客户完成这件事了！

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

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

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