CSS级联下拉菜单的制作

简介：这是CSS级联下拉菜单的制作的详细页面，介绍了和php,有关的知识、技巧、经验，和一些php源码等。

class='pingjiaF' frameborder='0' src='http://biancheng.dnbcw.info/pingjia.php?id=362690' scrolling='no'>---------------------------------
CSS级联下拉菜单的制作
---------------------------------
相关下载：
源码 —— http://www.kuaipan.cn/file/id_22624530505662765.html 准备工作：无。
---------------------------------
个人博客：www.jett23.com
交流邮箱：webmaster[at]jett23.com
---------------------------------

1. 下拉菜单原型代码：（ 实际开发中，我们更多的是采用 #navigation li a 这样的形式来定义CSS布局样式，而不是 ul li a ，所以需要在黄色标记处设置ul标签的id值！ ）
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单二</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
<li><a href="#">菜单四</a>
<ul>
<li><a href="#">子菜单一</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单三</a></li>
</ul>
</li>
<li><a href="#">菜单五</a></li>
</ul>

2. 下拉菜单雏形：ul边框填充值均设为0（兼容性！）；一级菜单列表项（列表符号none、长100宽30px、左浮动、显示inline、字体14px）
ul {
margin:0px;
padding:0px;
}
ul li {
list-style-type:none;
height:30px;
width:100px;
float:left;
font-size:14px;
display:inline;
}

3. 下拉菜单链接样式（关键代码）：（修饰下划线无、颜色白色、行高29px、背景色蓝色、显示block、左填充10px、右下边框1px solid #ccc）
ul li a {
text-decoration:none;
color:#FFFFFF;
background-color:#006699;
display:block;
line-height:29px;
padding-left:10px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}

4. 下拉菜单hover链接样式（改变背景色：一级菜单灰色、子菜单深蓝色）。
ul li a:hover {
background-color:#333333;
}
ul li ul li a:hover {
background-color:#00527D;
}

5. 至此，我们还需要最后一步。
当鼠标移到一级菜单上时才显示子菜单（关键代码：黄色标识处）。
ul li ul {
visibility:hidden;
}
ul li:hover ul {
visibility:visible;
}

爱J2EE关注Java迈克尔杰克逊视频站JSON在线工具
http://biancheng.dnbcw.info/php/362690.html pageNo:1