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

时间:2014-07-22 16:04:27

标签: css drop-down-menu megamenu

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

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

http://i.imgur.com/X2B45tB.jpg

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

http://i.imgur.com/AT3T53F.jpg

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

这是我的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都与大型菜单中的链接有关。

1 个答案:

答案 0 :(得分:0)

尝试左:0为孩子ul

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