CSS不允许孩子让父母长大

Question

看一下我正在工作的这个站点： http : //appload.nu/flygklubb第一个菜单项有孩子。 但是，正如您所看到的，孩子使父母变得更大。 如何防止父母长大，同时使所有孩子的大小相同？

Answer 1

将孩子放置在UL的绝对位置。

将CSS更改为：

#topnavigation > ul > li ul { visibility: hidden; }

至

#topnavigation > ul > li ul { visibility: hidden; position: absolute; }

Answer 2

与父宽度相同

要使子菜单与菜单保持相同的宽度，但要避免拉伸菜单：

#topnavigation ul li {
 position:relative;
}
#topnavigation ul li ul {
 position:absolute;
 z-index:1;
}
#topnavigation ul li ul li {
 height:auto;
 min-height:15px;
}
#topnavigation ul li ul li a {
 height:auto;
 min-height:15px;
}

-或-彼此相同的宽度

#topnavigation ul li ul {
 position:absolute;
 z-index:1;
}

注意：我还建议在子菜单项中添加背景色（或减少繁忙图像），以提高可读性。

Answer 3

Elment变得更大，因为

#topnavigation a {
  padding: 10px 11px;
}

1. 更改填充-顶部和底部的填充范围。 （我会准备4px）
2. 从#topnavigation a中删除高度-不必要
3. 从#topnavigation li移除高度-也没有必要
4. 更改div的高度（#topnavigation）。 （我会准备26px）

您的新CSS：

#topnavigation li {
display: list-item;
}

#topnavigation a {
    display: block;
    padding: 4px 11px;
}

#topnavigation {
    background-color: #ADA287;
    border-radius: 5px 5px 5px 5px;
    height: 26px;
    position: relative;
    top: 20px;
    width: 970px;
}