学习笔记（6）下拉及多级弹出菜单

#menu ul li ul li a { background:none;}

预览看下，二级菜单是不是已经归位了，但鼠标划过时还继承了一级菜单的样式.

第一行设置二级菜单的灰色边框；为了美观，我们把下拉菜单的宽度设置成和一级菜单宽度相同，第二行的width:85px再加上第一行上设置的边框左右各1px后正好是87px，和一级菜单宽度相同。margin:0是为了清除掉继承一级菜单中margin-left:2px；最后一行设置鼠标划过时的样式。

#menu ul li ul {

border: solid 1px #EEEEEE;

}

#menu ul li ul li {

float: none;

width: 85px;

background-color: palegoldenrod;

margin: 0;

}

#menu ul li ul li a {

background: none;

}

#menu ul li ul li a:hover {

background: #333;

color: #fff;

}

下一步就该把二级菜单隐藏，当鼠标划过时显示出来了。增加如下代码：

#menu ul li ul {

border: solid 1px #EEEEEE;

display: none;

}

#menu ul li:hover ul {

display: block;

}

注意第二行的写法，#menu ul li:hover ul这个比较难理解，它的意思是定义当鼠标划过#menu下ul下li时，li下的ul的样式，这里设置为display:block，意思是鼠标划过时显示这块内容。开始隐藏，鼠标划过时显示， 这就实现了我们想要的效果。目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现。我们定义一个类.sfhover（自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则,就实现了IE6下的正确显示。所以增加如下代码：

#menu ul li.sfhover ul { display:block;}

还有一个问题是当前导航下有内容的话，如果二级菜单显示，将会把下边的内容挤跑，所以需要给#menu ul li ul增加position:absolute;属性，当其绝对定位后，它将脱离原来文档流，不再占据空间，因此也不会再把下边内容挤跑了

完整代码：

• 首页
• 网页版式
• 自适应宽度
• 固定宽度
• web教程
• 新手入门
• 视频教程
• 常见问题
• web实例
• 常用代码

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

  到底什么时候用浮动，什么时候用定位呢？

  当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，因此不占据空间。 绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。

  而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流。

  一个元素浮动或绝对定位后，它将自动转换为块级元素。

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

  要想实现自适应宽度，需要在文字上增加一个辅助标签，如span，分别在a上和span上设置背景，一个左侧对齐，一个右侧对齐，如下的原理图:

  

  四条辅助线内为一个按钮元素，绿色部分为span，然后定义它的背景图片靠右侧对齐，而左侧的部分为a的背景图片，定义靠左侧对齐。当文字多时，会把span撑开，这实现了自适应宽度的按钮了

  

  代码：