纵向导航菜单及二级弹出菜单-Web标准(div+css)教程

　　今天我们开始学习《十天学会web标准(div+css)》的纵向导航菜单及二级弹出菜单，包含以下内容和知识点：

　　一、纵向列表

　　二、标签的默认样式

　　三、css派生选择器

　　四、css选择器的分组

　　五、纵向二级列表

　　六、相对定位和绝对定位

　　一、纵向列表

　　纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作

　　先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。

　　<div id="menu">

　　<ul>

　　<li>首页</li>

　　<li>网页版式布局</li>

　　<li>div+css教程</li>

　　<li>div+css实例</li>

　　<li>常用代码</li>

　　<li>站长杂谈</li>

　　<li>技术文档</li>

　　<li>资源下载</li>

　　<li>图片素材</li>

　　</ul>

　　</div>

　　从预览的效果上看，四周都有很大的空隙，而且每一行前边还有个点，这是因为标签的默认样式造成的，下面我们需要创建样式表把标签的默认样式给清除掉

　　生成的css代码如下：

　　<style type="text/css">

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　</style>

　　下面我们定义一下全局的字体，字号，行距等，点击css样式面板上的新建按钮，在弹出的窗口中选择器类型选择标签，名称选择body，然后在css编辑器中设置如下图所示属性

　　body全局样式定义后，下面我们给#menu定义一个灰色的1px边框及宽度，然后把li定义下背景色和下边框及内边距等

　　接下来定义li的背景色为浅灰色及下边框和内边距