Question

我制作了一个CSS Mega菜单，但我对下拉列表的宽度有疑问。菜单的下拉部分从父母开始的地方开始，向右延伸，但不向左延伸。所以我菜单上的第一项下拉菜单扩展了我的布局宽度（因为它从左侧开始），但第二，第三，第四项＆＃39;下拉菜单（从中间/右侧开始）仅从该父项向右延伸。由于这很难解释，我拍了一些照片。

这就是我想要它的样子。它只是这样看，因为它是最左边的下拉列表：

但是当我向右移动时，它看起来像这样：

我希望第二张图片也向左展开。

这是我的CSS。由于我无法标记我在每个部分评论的标识符。

#navigation {
    display: list-item;
    text-decoration: none;
    list-style-type: none;
    padding-left: 0px;
}

/* PRODUCTS MEGA MENU */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer {
    display: none;
    position: absolute;
    height: auto;
    min-height: 400px;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
    float: left;
    padding-left: 5px;
}

 /* PRODUCTS MEGA MENU LINKS */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer a {
    text-decoration: underline;
    font-weight: bold;
}

/* EDUCATION MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer {
    display: none;
    position: absolute;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* SERVICE AND SUPPORT MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer {
    display: none;
    position: absolute;
    float: left;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* ABOUT US MEGA MENU SECTION */
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer {
    display: none;
    position: absolute;
    float: left;
    height: auto;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    z-index: 5000;
}

/* HOVER CODE FOR PRODUCTS SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover >      #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer {
    display: block;
    background-color: #fff;
    float: left;
}

/* HOVER CODE FOR EDUCATION SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff;
}

/* HOVER CODE FOR SERVICE AND SUPPORT SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff
}

/* HOVER CODE FOR ABOUT US SECTION */
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer {
    display: block;
    float: left;
    background-color: #fff
}

我想我提供了所需的所有代码......我的其余CSS都与大型菜单中的链接有关。

Answer 1

尝试左：0为孩子ul

#navigation>ul
{
...rest of them...    
left:0;
...rest of them...
}

我的CSS Mega菜单从下拉选项扩展到右边但不是左边？

1 个答案: