代码之家 › 专栏 › 技术社区 › Moshe

为什么CSS下拉菜单会使内容向下跳?什么解决了这个问题?

css drop-down-menu

Moshe · 技术社区 · 15 年前

我正在开发一个纯CSS下拉菜单。(IE6现在对我不重要。)

我把所有的东西都放在一个“包装”分区里,以便集中。

该页在“包装”内有4个分隔符,第一个是“顶栏”,第二个是“导航”,第三个是“内容”框,第四个是“页脚”。

“内容”和“页脚”分隔符具有绝对位置,以防止子菜单暴露时它们跳下。这在ie8、chrome和ff中有效,但ie8的兼容模式显示ie7将在中间列的左侧呈现“content”和“footer”div。另外,绝对定位用于将页脚保持在页面底部。移除它可以修复IE7错误,但是当子菜单暴露出来时,它会导致所有东西都向下移动。

有没有办法在没有绝对定位的情况下修复IE7对底部分隔带左边距的渲染?还是用它?

我喜欢纯CSS。

编辑:

信不信由你,我使用的是一系列跨度元素,而不是ul或div。我应该使用ul/li结构吗?我发现这是额外的代码。

2 回复 | 直到 15 年前

o.k.w 15 年前

如果IE6不重要,您是否也考虑忽略IE7?

不管怎样,由于你没有发布你的代码,一个快速修复将使用 IE conditional comments 并将其放在CSS定义/链接的其余部分下面。

<!--[if IE 7]>
<style type="text/css">
  .className {position: static;/*or relative*/}
</style>
<![endif]-->

Alex 15 年前

你有没有想过把沙发放好 relative 将子菜单定位 absolute 相对于它的容器?

ul.menu li             { position:relative; overflow:auto; }    
ul.menu li ul.sub_menu { position:absolute; z-index:10; top:somePixelValueThatClearsTopListItem; }

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前