gpt4 book ai didi

html - 如何使用 CSS 制作支持悬停并尊重容器边缘的水平导航栏?

转载 作者:行者123 更新时间:2023-11-28 13:46:19 25 4
gpt4 key购买 nike

我正在尝试制作一个基于 CSS 的导航栏,它将 UL/LI 列表(包括悬停时显示的子 UL/LI 列表)转换为水平导航栏和子水平导航栏。除了子列表使用 position:absolute 来获得其在悬停元素下方的位置外,我当前的实现(见图)有效。我相信这是我的问题的根源,因为绝对定位的子菜单不尊重容器的边缘,所以如果浏览器变得太小,它会在顶层菜单环绕时从容器的边缘流出。我遇到的另一个问题是当顶级菜单换行时它不会垂直扩展页面,所以即使它占用更多空间但下面的段落也不会向下移动并重叠。

有没有人有任何 CSS 技巧或知道任何像我正在尝试制作的菜单的好例子?

图片链接: http://i47.tinypic.com/288tbn7.png

最佳答案

直到今天,HTML Dog 的文章“Son of Suckerfish Dropdowns”仍然是带有悬停的干净 CSS 菜单的经典之作。

http://www.htmldog.com/articles/suckerfish/dropdowns/

关于html - 如何使用 CSS 制作支持悬停并尊重容器边缘的水平导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11839087/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com