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

Question

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

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

[模型][ fiddle ]

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

提前致谢。

Answer 1

1:尝试将 #master 的大小更改为绝对大小(以像素为单位)而不是较小屏幕尺寸的百分比，使用 media queries .

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

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

3:同样在 CSS 中完成，如下所示:

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