javascript - 使用 css 和 jquery 重新调整大小和装饰文本

Question

我正在创建一个包含 4 - 5 个菜单项的侧面菜单。在页面加载事件中，所有子菜单都被隐藏，当用户单击主菜单时，只会显示子菜单。我能够完成大部分工作，但唯一令人困惑的部分是：

1. 当我重新调整页面大小时，一切看起来都很模糊。就像文本被覆盖在菜单框上一样。
2. 当鼠标悬停在任何主菜单上时，它应该在行下显示红色。
3. 当我点击任何子菜单时，它的文本颜色应该是红色的。

[型号][小提琴]

如果可能的话，任何人都可以指导我或告诉我我做错了什么。

提前致谢。

Answer 1

1：尝试使用媒体查询#master将大小更改为绝对（以像素为单位）而不是较小屏幕尺寸的百分比。

2：可以在 CSS 中使用边框来完成，如下所示：

.expanded > a:hover { border-bottom: 1px solid #f00; }

3：也可以像这样在 CSS 中完成：

#master > li > ul a:active { color: #f00; }