《十天学会web标准(div+css)》之第八天

　　《十天学会web标准(div+css)》之第八天：下拉及多级弹出菜单

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

　　1、带下拉子菜单的导航菜单

　　2、绝对定位和浮动的区别和运用

　　3、css自适应宽度滑动门菜单

　　一、带下拉子菜单的导航菜单

　　下拉菜单在一些企业网站应用尤为广泛，它存在使用方便，占用空间小等特点。之前纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已，下面我们以上一章第二节用图片美化的横向导航中的实例进行修改：



　　拿第五章css按钮的例子代码进行修改，先改为背景图片使用上图，再增加两个字数不等按钮，并在文字上增加span标签：

        

　　预览显示效果如下所示，因背景图片比较长，所以右侧显示不太友好，下一步就需要把a的宽度给去掉，设置span的背景，使右侧显示正常，另外把三个按钮横向排列：

　　在a上增加如下代码：

float:left; margin:5px;

　　横向排列，并增加5px的外边距，现在看下效果吧。为了美观，下一步需要a的左侧增加填充，使文字不死贴左侧，同理span右侧需要增加一个同样的填充：

a { display: block; float: left; margin: 5px; height: 37px; line-height: 37px; text-align: center; background: url(btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-left: 18px; }
a span { display: block; background: url(btn_bg.gif) no-repeat right 0px; padding-right: 20px; }
a:hover { background: url(btn_bg.gif) no-repeat 0px -37px; }
a:hover span{ background: url(btn_bg.gif) no-repeat right -37px; }

　　对比以上代码，可能你已经发现，原来a顶部的3px给去掉了，把高度改为37px了，行高也改为37px了，为什么这么做，大家动手试下就明白了。然后设置a下span的背景图片，span默认是内联元素，所以需先转换为块级元素；另外需增加鼠标经过时span的样式。显示效果如下，对比一下实例图，是不是实现了这样的效果：