CSS 导航水平子菜单不在父菜单正下方

Question

我有点卡住了。我正在尝试构建一个水平导航栏，宽度为 1024 像素，这将允许在其下方显示子菜单。但我希望子菜单的宽度也为 1024px，并直接显示在导航栏下方，垂直对齐。

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

li

的左侧。我该如何解决这个问题？

谢谢！

编辑：所以当鼠标悬停在上面时，它看起来像这样：http://eventav.biz/site/example.jpg

链接到我迄今为止所做的事情 - http://www.eventav.biz/site/

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>

Answer 1

去掉子

ul

的固定定位，换成

position:absolute

。添加

left:0px

，然后从父级

position:relative

中删除

li

。

工作 jsFiddle 示例

#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 */
}

Answer 2

1. 从

   position: relative;

    中删除 

   #top_menu_item

2. 将

   #top_menu_item ul

   设置为

   position: absolute; left: 0;

3. 使用

   #top_menu

    删除 

   padding-left: 0;
   上的左侧填充

4. 添加：

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

本质上，问题在于您已经相对于其父级

ul

定位了内部

li

标签。相反，上面的解决方案将辅助导航绝对定位于主导航，并且我们使用

left: 0;

来确保它完全左对齐。

在一个页面上多次使用

id

也是违反标准的。因此，我建议将

#top_menu_item

更改为

.top_menu_item

并相应地更改 HTML。

如果您有任何问题，请告诉我！