CSS样式为：
复制代码代码如下: <style type=”text/css”> #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号*/ margin:0px; padding:0px; text-decoration:none; } #navigation li { border-bottom:1px solid #ED9F9F; /* 添加标签<li>的下划线*/ } #navigation li a { display:block; /* 区
在网页设计中，创建动态交互的菜单栏是提升用户体验的关键因素之一。本示例通过纯CSS（Cascading Style Sheets）实现了一个简单的菜单栏，当鼠标悬停在各个菜单项上时，菜单项的颜色会发生变化，从而吸引用户的注意力并提供视觉反馈。下面将详细解析这个例子中的CSS样式和HTML结构。
我们来看CSS部分。这段CSS代码主要分为两部分：全局样式和特定元素样式。
1. 全局样式：
- `#navigation` 是菜单栏的ID选择器，设置其宽度为200像素，并指定字体为Arial。
- `#navigation ul` 选择器用于清除列表的默认样式，如项目符号，并去除内外边距，使得菜单项紧密排列。
- `#navigation li` 选择器为每个列表项添加一个下划线，模拟传统菜单栏的分隔效果。
2. 特定元素样式：
- `#navigation li a` 选择器定义了链接（菜单项）的基本样式。这里使用了`display:block`使得链接可以设置宽度和高度，形成一个块级元素，`padding`设置了内边距，`text-decoration:none`移除了下划线，同时设置了左右边框。
- `#navigation li a:link` 和 `#navigation li a:visited` 选择器分别定义了未访问和已访问链接的状态，它们设置了相同的背景颜色和文字颜色。
- 最关键的部分是 `#navigation li a:hover` 选择器，当鼠标悬停在链接上时，它会改变背景颜色和文字颜色，从而实现变色效果。
接下来是HTML部分，它创建了一个包含多个链接的无序列表。`<form>`元素和`runat="server"`属性通常用于ASP.NET环境中，但在本例中仅作为包裹容器，对功能实现没有直接影响。每个菜单项由`<li>`列表项和内部的`<a>`链接标签组成，链接的`href="#"`表示链接到页面的顶部，通常在实际应用中会替换为实际URL。
初始效果是所有菜单项呈现预设的颜色和样式，而当鼠标移到某个菜单项上时，由于`:hover`伪类的作用，菜单项的背景和文字颜色会根据CSS中设定的值改变，产生明显的视觉变化。
总结一下，这个例子展示了如何利用CSS选择器和伪类来实现动态效果，特别是`:hover`伪类在增加交互性方面的应用。通过调整CSS属性，你可以轻松地定制菜单栏的外观，比如颜色、边框、字体等，使其符合网站的整体风格。理解并掌握这些基础CSS技巧对于任何前端开发者来说都是至关重要的。
