Jquery 子菜单超出了页面的边距

[另一种解决办法]： 使用Jquery可以知道菜单到窗口的距离，因此对于每个菜单，需要测试鼠标悬停时其距离是否小于0。如果小于0，请使用css重新定位

JQUERY：

            var distance = $(window).width() - ($('#your-element').offset().left + $('#your-element').width());
            if(distance<0){
                /* manage if the menu that exceeds the window*/
            }

-100%显示下拉菜单级别2左侧的菜单外页边距

将Html内容

.sub-sub-menu

更改为

.sub-sub-menu1

或您喜欢的名称使用子级别的单独子菜单，以便它们显示在级别2的左侧，即级别2左侧的级别3和级别3左侧的级别4。即使使用下一级别，也很难适应当前代码

我认为如果在子菜单之后使用两者的混合会更好。下一个下拉菜单应该显示为垂直菜单，有助于将菜单限制在网格范围内

您的填充和边距以及所有这些都会使菜单更胖（占用空间240px 37px）您应该尝试将所有可见下拉菜单的长度总和限制在1288.472px下，这是在我的浏览器中呈现的菜单的大小。

---

基本上，我想说的是为下拉菜单（li和a标签）提供填充和边距这样，当最深的下拉菜单可见时总长度应该小于您使用的网格大小

您需要记住以下步骤

建议您重新设置html标记，以减少浏览器在边距、填充等方面的不一致

两个最著名的重置css是：

-我更喜欢这个

UL默认具有列表样式，因此会覆盖它列表样式：无

JS fiddle链接，现在是修改后的css：

#header .container {
padding:30px 0 50px 0;
}
#header .container .logotipo {
float:left;
height:22px;
width:97px;
}
#header .container .menu {
float:left;
 margin-left:20px;
margin-top:-30px;
}
.menu ul li {
float:left;
list-style:none;
margin-left:40px;
position:relative;
}
.menu ul li:hover > ul {
display:block;
list-style: none;
padding:0;
}
/* 1 */
.menu ul li:nth-child(1) a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
.menu ul li a {
color:#000;
cursor:pointer;
display:inline-block;
font-family:Gisha;
font-size:16px;
padding:32px 0 9px 0;
text-decoration:none;
}
.menu ul li:hover a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
/* 2 */
.menu ul li > ul {
border-top:3px solid #7F9614;
display:none;
position:absolute;
width:240px;
}
.menu ul li > ul.sub-menu li {
float:left;
margin-left:0;
width:100%;
}
.menu ul li > ul.sub-menu li a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background:rgba(255, 255, 255, 0.8);
border-bottom:1px dotted #7F9614;
border-top:none;
color:#7F9614;
font-size:14px;
padding:10px 0px 10px 20px;
word-break:break-all;
}
.menu ul li > ul.sub-menu li a:hover {
background:#7F9614;
color:#fff;
}
/* 3... */
.menu .sub-sub-menu {
position:absolute;
left:100%;
top:0;
}
.menu .sub-sub-menu {
border-left:1px dotted #7F9614;
border-top:none;
word-break:break-all;
}

注意：像这样的菜单是一个坏主意，你遇到的问题就是一个很好的例子。环顾四周，大多数网站都有很好的理由不这样做，甚至还有更多的理由不在没有javascript的情况下这样做

也就是说，只需使用

HTML

和

CSS

就可以了

您可能希望使用媒体查询根据窗口大小更改

CSS

；比如：

@media (max-width: 800px) {/*just change 800 to whatever you need*/
    /*css here*/
}

我举了一个有效的例子

它不是没有问题/bug，但它只是为了说明这个概念。我添加了一个空的

li

，其中包含一个

trigger

类，显示菜单何时需要折叠

我还对您现有的

CSS

做了一些更改，并添加了注释，以便您可以查看更改的内容

这类问题通常通过只有一个下拉级别的主菜单来解决，其中包含附加链接的页面将在这些页面的辅助导航中显示这些附加链接，而不是试图将

10

lbs的“东西”放入

5

lb的袋子中

---

比如，他们在页面介绍性内容下方的3个块中进行了二次导航（针对您、针对业务、针对开发人员）。大多数网站都以类似的方式处理此问题。

下面是代码：在问题中显示您的代码。这就是为什么SO不允许您在不显示代码的情况下发布小提琴。您将进入5个级别，仅4个子菜单就被“关于我们”链接上的

960px

广泛组合，被

437px

抵消。因此，它无处可去，如果它保持向右运行，您将至少需要

1396px

，如果它切换到向左运行，它将从左侧屏幕上消失

523px

。所以无论哪种方式，你只是在做一个很好的例子，说明为什么你不应该一直在水平下拉菜单上添加关卡。Midia？你是指下拉列表中的“媒体”吗？另外，您在这个问题上标记了jQuery，但这是一个仅限于CSS的菜单。您打算使用jQuery吗？如果是这样，您可以测试每个菜单项的右边缘，并相应地重新定位。。。可能会将附加到任何菜单项的类更改为只将该项定位到左侧而不是右侧的类…这只解决了存在的众多问题之一，这并不是一个完整的解决方案。很好的解决方案不是我没有想到这一点，但改变菜单结构并不是他的问题，为什么它会超出页面的边距。我已经提到，它取决于网格大小，菜单的大小应该与网格大小相关，并且大小应该保持在网格大小中，另一个建议是最好更改下拉级别的背景颜色，使其更易于识别。因为它不适合，所以它必须进行调整才能工作。我的答案是使用媒体查询，菜单结构保持不变，只是它的外观会根据需要改变。他可以用背景色做任何他想做的事情，媒体查询可以在网格中包含它。我的例子只是为了说明如何使用媒体查询，他从那里做什么取决于他。嘿，让我们总结一下，我同意你刚才所说的，我想知道的是，我不是从一开始就引用了每个li标签的总宽度和高度，我让读者把二和二放在一起，为自己辩护，我试图在不改变结构的情况下显示他的菜单，并且没有对代码做太多更改。为了表明即使超出页面范围的菜单显示在左侧，仍然会导致问题，因为标签的总宽度超过了菜单和页面的宽度

.menu .sub-sub-menu1{position:absolute;left:-100%;top:0;}// does the trick alter 

#header .container {
padding:30px 0 50px 0;
}
#header .container .logotipo {
float:left;
height:22px;
width:97px;
}
#header .container .menu {
float:left;
 margin-left:20px;
margin-top:-30px;
}
.menu ul li {
float:left;
list-style:none;
margin-left:40px;
position:relative;
}
.menu ul li:hover > ul {
display:block;
list-style: none;
padding:0;
}
/* 1 */
.menu ul li:nth-child(1) a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
.menu ul li a {
color:#000;
cursor:pointer;
display:inline-block;
font-family:Gisha;
font-size:16px;
padding:32px 0 9px 0;
text-decoration:none;
}
.menu ul li:hover a {
border-top:3px solid #7F9614;
color:#7F9614;
display:block;
padding:29px 0 9px 0;
}
/* 2 */
.menu ul li > ul {
border-top:3px solid #7F9614;
display:none;
position:absolute;
width:240px;
}
.menu ul li > ul.sub-menu li {
float:left;
margin-left:0;
width:100%;
}
.menu ul li > ul.sub-menu li a {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
background:rgba(255, 255, 255, 0.8);
border-bottom:1px dotted #7F9614;
border-top:none;
color:#7F9614;
font-size:14px;
padding:10px 0px 10px 20px;
word-break:break-all;
}
.menu ul li > ul.sub-menu li a:hover {
background:#7F9614;
color:#fff;
}
/* 3... */
.menu .sub-sub-menu {
position:absolute;
left:100%;
top:0;
}
.menu .sub-sub-menu {
border-left:1px dotted #7F9614;
border-top:none;
word-break:break-all;
}

@media (max-width: 800px) {/*just change 800 to whatever you need*/
    /*css here*/
}