CSS 实践：两种实现下拉菜单的方法.docVIP

CSS 实践：两种实现下拉菜单的方法CSS伪类的一个非常重要的应用就是下拉菜单。　　最近在学习中发现网上纯粹用CSS实现的下拉菜单主要有两种思路：一种是通过visibility属性的切换，另一种是基于display属性的切换。二者在大体的结构上是一致的，只是对于二级子菜单的隐藏和显示的实现策略上有所不同。　　下拉菜单的HTML代码如下： 以下是代码片段：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleCSS下拉菜单/title !-- link rel=stylesheet type=text/css href=nav1.css / -- !-- link rel=stylesheet type=text/css href=nav2.css / -- /head body div class=menu ul li a href=#menu_0/a ul lia href=#item_0/a/li lia href=#item_1/a/li lia href=#item_2/a/li lia href=#item_3/a/li lia href=#item_4/a/li /ul /li li a href=#menu_1/a ul lia href=#item_5/a/li lia href=#item_6/a/li lia href=#item_7/a/li lia href=#item_8/a/li lia href=#item_9/a/li /ul /li li a href=#menu_2/a ul lia href=#item_10/a/li lia href=#item_11/a/li lia href=#item_12/a/li lia href=#item_13/a/li lia href=#item_14/a/li /ul /li li a href=#menu_3/a ul lia href=#item_15/a/li lia href=#item_16/a/li lia href=#item_17/a/li lia href=#item_18/a/li lia href=#item_19/a/li /ul /li li a href=#menu_4/a ul lia href=#item_20/a/li lia href=#item_21/a/li lia href=#item_22/a/li lia href=#item_23/a/li lia href=#item_24/a/li /ul /li /ul /div div style=clear: left;Content!/div /body /html 　　在不添加CSS的情况下，下拉菜单实际上就是二级无序列表。在CSS中通过对子列表的隐藏与显示的操作来达到下拉的效果。　　两种实现下拉的方法的共同点在于：　　1. 必须将最外层的ul元素的padding属性设为0，以保证整个下拉菜单中的没有无序列表中的自动缩进。同时，将list-style-type设为none，以去除列表项前的标记。　　2. 如果主菜单需要横向，则需要把li元素设置为浮动元素，即float: left。　　3. 使二级子菜单呈一列的方法是将二级列表的ul元素和li元素设置为相同的宽度。　　4. 必须把二级列表的ul元素的position属性为absolute，以保证将该元素及其子元素从文件流中去除，这样一来当二级菜单显示的时候不会影响下面的其它元素。5. 下拉菜单后面的页面元素，需要把clear属性设置为left或者both。这是因为下拉菜单被设为了浮动元素，如果不这样做的话后面的页面元素的位置将会不恰当。　　6. 需要通过伪类:link、:visited以及:hover来设置元素有焦点和没有焦点时的颜色状态等。　　不同点如前所述，即是：当一级菜单项没有焦点的时候，方法一会把二级菜单的ul元素的visibility属性设为hidden，使整个二级菜单不可见;当有焦点的时候，需要把相应的二级菜单的visibility属性改为visible，使其可见。而方法二则将需要不可见的二级菜单ul元素