纯CSS制作页面导航下拉菜单

在上一篇制作企业网站建设的页面布局实战中提到了一个点：使用纯CSS制作下拉菜单，

这篇文章就详细来说一下纯CSS制作下拉菜单。

经过长期的写CSS以及企业仿站中，总是在其他页面给我惊喜以及增加知识学习CSS的地方，其中就有使用“position:relative;”结合“display:none;以及“display:block;”制作下来菜单。

Position：CSS中用于定位的标签，他的值详解如下：

static	:	默认值。无特殊定位，对象遵循HTML定位规则
absolute	:	将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed	:	未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative	:	对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

 

:hover：#选择符/.选择符：我们大多的时候在超链接样式中能够见到，意思当鼠标移动覆盖上面未点击的效果动作，其实他不仅仅作用于超链接，也可以用li,p等中（其实我也是经常用在这两个地方以及超链接中）

 

下面这个纯CSS制作下拉式菜单的思想就是：在鼠标未覆盖在元素对象上，他的样式属性是：display:none; 当鼠标移动覆盖上面其 CSS属性值为：display:block; 然后结合position:relative; 依据top\left\right\bottom来定 位。

     心得：

1、第一点还是蛮重要的，但我不清楚他术语是怎么表达，我自己理解的就是主从关系或者说上下级包含关系，例如：

1、

<div></div>

<div></div>

这种是失败的，在附件企业建站资料中有源码演示

2、ul li 这种的下拉样式，可能比较适合简单的文字形式的纯CSS下拉菜单，p与p 适合一些比较复杂的，可以方便在p里面继续规划布局。

3、纯CSS制作的下拉样式上下级之间的不能有margin的外间距，如果需要建议使用内间距padding，因为当鼠标移开上级元素下拉就会失效，上下级必须是紧紧挨着的，间隙可以使用上面说的padding或者使用border白色或者和背景色相同的边框代替。

4、结合一级一级部署源码，还可以实现三级或者四级弹出，结合top/left/right/bottom的属性值调试，还可以实现不仅仅在于往下方向弹拉出菜单哦，

5、其他注意点以后遇到在添加。由于是半路出身，只要是能达到目的的方法就是好方法，p+CSS纯粹是看页面源码看多了自学，半桶水，本站有任何错误点或者有其他更好方法点的地方，希望联系底部的联系QQ，互相学习。该篇文章讲到的源码素材点击下方附件：

 

 

TAGS:CSS , 下拉菜单

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/41.html转载请标注此链接