我制作了一个CSS Mega菜单,但我对下拉列表的宽度有疑问。菜单的下拉部分从父母开始的地方开始,向右延伸,但不向左延伸。所以我菜单上的第一项下拉菜单扩展了我的布局宽度(因为它从左侧开始),但第二,第三,第四项'下拉菜单(从中间/右侧开始)仅从该父项向右延伸。由于这很难解释,我拍了一些照片。
这就是我想要它的样子。它只是这样看,因为它是最左边的下拉列表:
但是当我向右移动时,它看起来像这样:
我希望第二张图片也向左展开。
这是我的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都与大型菜单中的链接有关。
答案 0 :(得分:0)
尝试左:0为孩子ul
#navigation>ul
{
...rest of them...
left:0;
...rest of them...
}