CSS页面布局设计基础：纵向导航菜单制作指南
纵向导航作为网站的重要组成部分，通常以左侧或右侧垂直排列的形式呈现。本文通过具体案例，演示如何利用div+h1+h2标签组合实现这类导航菜单的制作。
效果预览与标记结构
先观察实际呈现效果（此处可脑补导航菜单视觉效果）。其核心标记结构如下：
```html
```
样式表编写规则
以下是实现该导航效果的核心CSS代码，采用精简写法便于理解：
```css
nav {
width:100px;
}
nav h1 {
margin:0px;
padding:4px;
}
nav h2 {
margin:0px;
padding:4px;
}
nav h2 a {
color:666666;
}
nav h2 a:hover {
color:999999;
}
```
关键样式解析
2. 标题层级样式：h1作为二级分类标题，通过`margin:0px`消除默认边距，`padding:4px`设置内边距，字体使用12px Verdana并加粗显示，背景
3. 子项交互设计：h2标签作为具体导航项容器，保持与h1一致的内外边距和字体设置（仅取消加粗）。其内部链接`a`标签默认颜色为666666，去除下划线；鼠标悬停时颜色加深至999999，并显示下划线提示可点击状态。
这种样式设计既保证了导航菜单的功能性，又通过合理的间距控制和颜色搭配提升了视觉舒适度。开发者可根据实际需求，通过调整宽度值、颜色代码或字体参数，快速适配不同网站的风格要求。
