纯css制作导航下拉菜单



转载文章，觉得作者思路很好

<nav>

<ul>

<li><a href="#">导航一</a>

<ul>

<li><a href="#">二级导航</a></li>

<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>

<ul>

<li><a href="#">三级导航</a></li>

<li><a href="#">三级导航</a></li>

<li><a href="#">三级导航</a></li>

</ul>

</li>

<li><a href="#">二级导航</a></li>

</ul>

</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>

<ul>

<li><a href="#">二级导航</a></li>

<li><a href="#">二级导航</a></li>

</ul>

</li>

<li><a href="#">导航六</a></li>

</ul>

</nav> 123456789101112131415161718192223242526272829303132333435363738394041

nav {

margin:100px auto;

text-align:center;

}

nav ul {

border-radius:10px;

background:linear-gradient(to bottom,#efefef,#bbbbbb);

padding:0 20px;

display:inline-table;

position:relative;

box-shadow:1px 1px 3px #666;

}

nav ul ul {

display:none;

}

nav ul li {

float:left;

}

nav ul::after {

content:"";

display:block;

clear:both;

}

nav ul li a {

display:block;

padding:25px 40px;

color:#000;

text-decoration:none;

font-family:"微软雅黑";

}

nav ul li:hover > ul {

display:block;

}

nav ul li:hover {

background:linear-gradient(to bottom,#4f5964,#5f6975);

}

nav ul li:hover a {

color:#FFF;

}

nav ul ul {

background:#5f6975;

border-radius:0;

position:absolute;

top:100%;

padding:0;

}

nav ul ul li {

float:none;

border-top:1px solid #6b727c;

border-bottom:1px solid #575f6a;

}

nav ul ul li a {

color:#FFF;

}

nav ul ul li a:hover {

background:#4b545f;

}

nav ul ul ul {

width:100%;

position:absolute;

left:100%;

top:50%;

}

1234567891011121314151617181922232425262728293031323334353637383940414243444546474849505152535455565758596061626364

思路：

做一个下拉菜单，脑海里第一个闪过的效果就是：鼠标触及-下拉菜单出现-鼠标移开-下拉菜单隐藏

既然是纯css实现。首先需要了解display属性的特性，使用none、block值来实现下拉菜单的出现和隐藏。

搭配html结构，利用<ul><li></li></ul>对菜单进行分级

熟悉伪类选择器，:hover不止在文本中使用

利用::after伪元素选择器来清除浮动

使用position定位来控制下拉菜单的位置

考虑美观

以上案例用到了一些css3的新特性，如：圆角、背景阴影、背景色渐变、伪元素

圆角 border-radius

当值为四个数值时，按顺序分别表示左上角、右上角、右下角、左下角。

当值为两个数值时，前者表示左上角、右下角；后者表示右上角、左下角；两者是对立关系。

当值为一个数值时，说明元素的四个角都使用这一数值。

border-radius还可以用来制作半圆，以及四分之一圆

div {

width:100px;

height:50px;

border-radius:50px 50px 0 0;

background-color:#F00;

}123456

背景阴影 box-shadow

语法：box-shadow：【水平阴影】 【垂直阴影】【阴影模糊距离】 【阴影模糊程度】【阴影颜色】【内部阴影】/【外部阴影】

其中，水平阴影、垂直阴影是必须项，其他为可选项，阴影位置默认为外部阴影（outset）。

背景颜色渐变

线性渐变语法 background：linear-gradient（方向，起始颜色，终止颜色）；

方向也称角度，线性渐变的角度是以圆心为起点的发散型角度。例如：想要一个由上往下的红白渐变 background:linear-gradient(to bottom,red,white);

关于颜色渐变这一特性其实需要讲述的有很多，会单开一篇博文来做详细讲解

伪元素

上一篇博文中提到的利用伪元素选择器来清除浮动，在这个案例中就运用到了，详情请翻上一篇。

遇到的问题及解决办法

display：inline-table不设置宽度时，宽度由内容撑开

在案例中，并没有给任何父元素或者子元素添加宽、高，而是使用padding值和内容本身将元素撑开。在未设置display：inline-table的情况下，元素的宽就是整个浏览器的宽度，是随着浏览器的大小来改变的。设置后，元素的宽=padding-left+内容+padding-right

给元素设置定位时，需要给一个宽度

当第三级菜单出现时，文字是以单个竖排的方式来显示(中、英文文本的排列不同)，如下图：

在上图的三级导航中，中、英文排序方式完全不同，position属性的定义中有一点很重要，如果不给添加定位后的元素宽度，那么此元素会以一个字符的宽度来显示，从中文文本中可以看出，它就是这么显示的，一个中文字代表一个字符；而英文文本中，一个单词代表一个字符，注意是一个单词，不是一个字母。

所以给此元素添加一个宽度就可以使文本横向显示出来。