Html CSS导航水平子菜单不直接位于父菜单下方

我有点困了。我正试图建立一个横向导航栏，1024px，它将允许一个子菜单显示在它下面。但我希望子菜单的宽度也是1024px，并直接显示在导航栏下方，垂直对齐

此时子菜单出现，但将其左侧固定到您悬停的当前

li

的左侧。我怎样才能解决这个问题

谢谢

编辑：所以，将鼠标悬停在其上时，其外观如下所示：

链接到我迄今为止所做的工作-

ul.top\u菜单{
位置：相对位置；
保证金：0；
边缘底部：-1px；
列表样式：无；
显示：表格；
宽度：1024px；
边框：1px实心#111111；
边框底部：1px实心#000000；
边界半径：10px 10px 0px 0px；
}
.top菜单li{
显示：块；
位置：相对位置；
右边框：1px实心#111111；
浮动：左；
边际：0px；
显示：表格单元格；
垂直对齐：中间对齐；
}
.top_菜单李：第一个孩子{
左边框：1px实心#111111；
}
.顶菜单李a{
显示：块；
文字装饰：无；
颜色：#000000；
文本阴影：3px 3px 8px#3a3a；
填充：15px；
高度：30px；
显示：表格单元格；
垂直对齐：中间对齐；
边际：0px；
}
#顶部菜单项ul{
显示：无；
边际：0px；
}
#顶部菜单项：悬停{
显示：块；
位置：固定；
保证金：0；
}
#顶部菜单项：鼠标悬停{
宽度：1024px；
背景色：#666；
文本对齐：左对齐；
颜色：#FFF；
字体大小：12px；
边际：0px；
}

从子

ul

上移除固定定位，并将其替换为

位置：绝对

。添加

left:0px

，然后从父

li

中删除

position:relative

1） 移除

位置：相对来自
#顶部菜单(项目

2） 将顶部菜单项ul设置为绝对位置；左：0取而代之

3） 使用
左填充：0删除
顶部菜单上的左填充

4） 加：

本质上，问题是您一直在定位内部
ul
标记相对于其父
li
。相反，上面的解决方案将辅助导航定位到与主导航绝对相关的位置，我们使用
left:0以确保其完全左对齐

在一个页面上多次使用
id
也是违反标准的。因此，我建议将
#top_menu_item
更改为
.top_menu_item
，并相应地更改HTML

如果你有什么问题，请告诉我
 对不起，我想我描述错了。如果您查看此链接（），我希望下拉的子菜单显示在导航下方。好像它只是它的一个延伸，相同的宽度和位置，但在它下面。如果将鼠标悬停在其中一个链接上，您可以看到它一直缩进到链接的位置。编辑：所以当鼠标移到上面时，它看起来像这样：棒极了。非常感谢你。CSS令人困惑！你能告诉我为什么导航到上面的黑线有1px的边距吗？此外，子菜单重叠1px。我可以通过使用边距来解决这个问题：-1px；但我只是不明白，当我把所有内容都设置为边距和填充0时，为什么会是这样。非常感谢您的帮助，我使用了页边空白底部：-1px来修复间隙。但是子菜单没有填满整个1024px。我使用了jFiddle脚本。你能告诉我为什么吗？在chrome浏览器上，子菜单缩进到左侧1px，但在internet explorer上不缩进@汤玛舒斯，这是因为1px的边界。谢谢你，我已经修好了。现在正试着把宽度排序。非常感谢。我用这个信息和JoshC的信息修复了它。我也会将id更改为类。谢谢-编辑：我试着感谢你们两位，但我不确定如何感谢：-/你们没有足够的代表支持投票，不用担心，只要“提前付款”：
ul.top_menu {
        position:               relative;
        margin:                 0;
        margin-bottom:          -1px;
        list-style:             none;
        display:                table;
        width:                  1024px;
        border:                 1px solid #111111;
        border-bottom:          1px solid #000000;
        border-radius:          10px 10px 0px 0px;
    }

    .top_menu li {
        display:                block;
        position:               relative;
        border-right:           1px solid #111111;
        float:                  left;
        margin:                 0px;
        display:                table-cell;
        vertical-align:         middle;
    }

    .top_menu li:first-child {
        border-left:            1px solid #111111;
    }

    .top_menu li a {
        display:                block;
        text-decoration:        none;
        color:                  #000000;
        text-shadow:            3px 3px 8px #3A3A3A;
        padding:                15px;
        height:                 30px;
        display:                table-cell;
        vertical-align:         middle;
        margin:                 0px;
    }

    #top_menu_item ul { 
        display:                none;
        margin:                 0px;
    }

    #top_menu_item:hover ul {
      display:                  block;
      position:                 fixed;
      margin:                   0;
    }

    #top_menu_item:hover li {
        width: 1024px;
        background-color: #666;
      text-align:               left;
      color:                    #FFF;
      font-size:                12px;
      margin:                   0px;
    }

<ul class="top_menu">
                        <li id="top_menu_item"><a href="#">HOME</a></li>
                        <li id="top_menu_item"><a href="#">OUR SERVICES</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">EXAMPLES OF OUR WORK</a>
                            <ul><li id="top_menu_item"><a href="#">test</a></li></ul>
                        </li>
                        <li id="top_menu_item"><a href="#">CONTACT US</a></li>
                    </ul>

#top_menu_item:hover ul {
    display: block;
    position: fixed; /* Change this to position:absolute; */
    left:0px; /* Add this */
}

.top_menu li {
    display: block;
    position: relative; /* Remove this */
}

#top_menu_item:first-child {
    margin-left: 40px;
}