Html CSS帮助-对齐菜单

我遵循本教程，并尝试将其修改为我的用途：

如果我将下拉div设置为与水平菜单栏相同的全宽，如何确保它与菜单栏对齐？

我发现我可以在以下CSS规则中更改

left

声明，以使下拉菜单与菜单栏对齐

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;  /* <-- change this to left: -150px (or whatever value will get it to align) */
    top:auto;
}

#菜单li:hover.dropdown#1列，
#菜单li：悬停。下拉菜单2列，
#菜单li：悬停。下拉菜单\u 3列，
#菜单li：悬停。下拉菜单4列，
#菜单li：悬停。下拉菜单\u 5列{
左：-1px；/*您可以尝试在页面中添加css重置，以减少浏览器不一致
您正在更改教程中菜单的对齐方式，因此一些css设置也需要更改以获得所需的效果

我希望下拉div的全宽与
完整的水平菜单栏并与菜单栏对齐

在教程中，它说

为了拥有一个完美的下拉容器，我们需要指定
每一个的宽度

所以你应该根据需要调整所有的宽度

我在你的css中所做的是

    #menu li .align_right {  
    /* Rounded Corners */  
   /*-moz-border-radius: 5px 0px 5px 5px;  
    -webkit-border-radius: 5px 0px 5px 5px;  
    border-radius: 5px 0px 5px 5px;*/
}  

#menu li:hover .align_right {  
   /* left:auto;
    right:-1px;*/   
    top:auto;  
} 

我删除了1列的右边框，因为在教程中，它有不同的对齐方式（它在右侧），您使用此1列所做的是将其放在左侧，因此必须删除
右边框。这是主要原因

查看此输出





mega下拉菜单的教程太多了，这取决于您的需要，请查看它们是否适合您的需要




我建议你仔细阅读教程，并相应地/相反地更改css，这将消除你对css的许多疑问/概念，很快你就会轻松地学习css。
在不久的将来，您将在这里回答css问题：）

编辑：

根据你的评论，我理解这一点：







我所做的是：

我相应地改变了宽度：

.dropdown_1column {width: 930px;}  
.dropdown_2columns {width: 931px;}  
.dropdown_3columns {width: 930px;}  
.dropdown_4columns {width: 932px;}  
.dropdown_5columns {width: 932px;}  

以前的left属性应用于所有列，这是不正确的。您必须根据I dont在每个列中应用单独的left值

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}  

希望这是清楚的…
虽然这是解决方案，但对OP解决问题没有帮助。简短的描述就好了。好吧，编辑和发布解决方案对OP和其他用户都没有帮助。解释>>复制和粘贴。好吧，你是对的，尽管我只讨论了问题的一部分emaining…感谢您的解释，但Christoph是对的。我不想修复JSFIDLE示例。我是从教程中复制和粘贴创建的，没有时间找出为什么不完全正确。我将尝试编辑问题以澄清。@user5668您在所有部分都添加了宽度。请参阅我的编辑，将宽度设置为只有当你想让下拉菜单看起来像菜单栏一样全宽时，你才需要调整这些宽度。这个reset.css是非常无用的。大量的代码，最小的影响，因为你必须重新声明所有内容。直接在你需要的地方声明边距/填充是更好的方法。我把时间花在解决JSFIDLE问题上 :D@Pankaj-我非常感谢你的支持和鼓励。这对我来说是一个很好的教训。但不幸的是，这并没有回答我原来问题的关键部分。我不知道你到底有什么问题，如果你想根据菜单栏下拉，你需要删除这些宽度，你可以通过这样做来确保是…@Pankaj-查看并注意到每个下拉列表如何从父项开始，而不是与蓝色菜单栏的开始/左侧对齐？我希望下拉列表与菜单栏对齐。希望这一次我得到了这个…请让我知道。。
#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}