微软的纯css 水平下拉菜单，弹出式菜单

《微软的纯css 水平下拉菜单，弹出式菜单》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、来自微软的纯CSS下拉菜单最简单的下拉菜单按照以下步骤定能做出漂亮的弹出式菜单；马上开始吧结合JavaScript的下拉菜单，纯CSS的下拉菜单我也写过很多了。不过在微软MicrosoftExpressionWeb的相关站点上看到这个纯CSS下拉菜单的时候，我还是觉得很赞赏。这应该是最精简、最干净的纯CSS下拉菜单了。先看一下效果（这是我重新实现的）：下面是实现方法：首先是菜单的XHTML代码：

• 菜单一
• 菜单二

  • 2、ref="#">子菜单一

  • 子菜单二
  • 子菜单三
• 菜单三
• 菜单四
  • 子菜单一
  • 子菜单二
  • 子菜单三
• 菜单五

3、ul> 不设置任何CSS类，实在是干净到极点了（当然，考虑到实际应用的复杂性，我估计你不可能真的什么都不加。要么把这段代码放到一个特定的容器里，要么给第一层的ul加一个id或者class。假设这是在一个新的HTML文档里，那么我们现在没有任何的CSS定义，这时候的网页显示效果是这样的：在我们的下拉菜单中，不需要内补丁、外边距这些东西，即使需要，我们也要自己重新设置，所以我们首先添加第一条规则：ul{margin:0px;padding:0px;}为了跨浏览器兼容，必须同时把外边距和内补丁都设置为0，因为有的浏览器默认使用

4、外边距，有的则默认使用内补丁。这样设置以后，页面上可以看到两层列表项前面的缩进都没了，实心和空心的列表符号也不见了。然后设置第二条规则：ulli{float:left;display:inline;font:0.9emArial,Helvetica,sans-serif;height:30px;width:100px;list-style:none;}这是让原本各占一行的li元素变成嵌入式（inline）显示，另一种说法是把list-item元素变成行内元素。总而言之就是让li不要各占一行，并列起来，这样才能成为菜单。设

5、置后，效果如下：这样就得到了下拉菜单的雏形，当然了，外观很丑陋，下拉功能也还没实现。这里要说明的是，最好给菜单项设置高度和宽度，否则有可能出现不可预料的结果（取决于页面或容器的宽度）。为了让菜单项看起来像菜单，我们继续添加规则：ullia{color:#FFF;text-decoration:none;line-height:29px;width:91px;margin:0px;padding:0px0px0px8px;display:block;border-right:solid1px#ccc;border-bott

6、om:solid1px#ccc;background:#808080;}这一条规则比较长，从作用上说呢，就是加上背景和菜单间的隔离线，把默认有下划线蓝色的文字变成白色无下划线。增加了规则后的效果：从外观上，这就已经是我们最终的下拉菜单样式了。不过，我们还要在细节上修饰一下，比如让子菜单和一级菜单的样式有所区别（当然了，由于字体设置的0.9em，所以在文字大小上已经有区别了，但是还不够，而且对于中文来说，很多时候我们未必能通过文字大小来区别，因为适合中文的常规文字大小就12px和14px而已），所以我们修改一下子菜单的背景

7、色，并且让子菜单比一级菜单的高度要小一些。规则：ulliulli{height:25px;}ulliullia{background:#666;line-height:24px;}这里包含两条规则，第一条是将子菜单的列表项目高度由之前统一设置的30px减小为25，第二是将子菜单项的背景改为#666，并且文字行高对应地减小到24设置完成后（列表项高度-1，减去的1正好是上边框的1像素），效果如下：通常我们鼠标滑过某个菜单项的时候，要让它跟其它项目有所区别（表示当前菜单处于激活状态，术语叫“高亮”，所以我们对一级菜单的鼠标滑

8、过样式做一下定义：ullia:hover{background:#666;}注意，这里为鼠标滑过时设置的背景色和子菜单的背景色一样，原因？看效果就知道了：这里的第二个菜单项就是鼠标滑过时候的样式，这样就跟弹出的（现在还不会弹出）子菜单背景色一致了。现在整个菜单的样式都设置完了，但是，这只是静态的菜单啊，我们要的是会动