纯css实现导航栏和下拉菜单

如果能够做到每天理解并掌握一个概念，那么每一个新的一天，你都是更好的自己。

开门见山，先来看一下今天要实现的效果：

图1 下拉框实现效果

当鼠标移到services标签上时，会出现下拉框。

在动手写代码前，最好先分析下具体的需求。

根据 图1 不难发现，整个导航栏分为两部分，如下图

图2 parts

part 1 是导航的主体部分，part 2 是下拉菜单部分。之所以把整个导航栏分成2个part是因为我个人习惯把大问题打散分成多个小问题，然后逐个击破。我觉得这是一个很好的思考习惯，因为小问题往往比较好解决，而大问题往往比较宏观，难以把控。

撇开part 2，我们先来实现part 1。

根据经验，我们可以很容易的实现part 1，其实它就是一个简单的ul。

下面直接上代码截图：

图3 part 1 实现

在上面的实现中，关键知识点涉及到了浮动和浮动的原理。对这一块不是很熟悉的童鞋可以参考张鑫旭大神的文章《CSS float浮动的深入研究、详解及拓展》。

part 1 实现以后，我们来想想怎么实现part 2。仔细观察 图1 可以发现，services 标签下的下拉菜单应该是和 services 同级的 ul 标签，我们先来试试把 ul 加上去以后的效果。代码更新如下图

图4 添加子菜单ul

运行一下观察变化

图5 添加子菜单

接着，为子菜单添加一点样式

图6 为子菜单添加样式

效果如下

图7 子菜单效果

从 图7 可以看到，图1 中的需求已经初具雏形了。现在的问题就很简单了，怎么让子菜单在鼠标未移入 services 标签时消失，并在鼠标移入 services 标签时显示呢？这里，我们将用到绝对定位和hover伪类。

具体请看下面代码，非常好理解。

图8 最终代码

至此，一个简单的导航栏以及下拉菜单就实现了。

第一次写技术博客，感觉还有好多不足，这个简单的例子也是我自己尝试盲写了好多次才真正实现的。在实现的过程中，逐步逐步的对其中涉及的一些概念慢慢的有了一点感觉，但肯定还有许多不足。这仅是css之路的第一步，后面还有很长的路要走，希望自己可以坚持。相比于js，我更喜欢研究css，因为我觉得css更有趣。你码的每一行代码都有可能产生不同的效果，并且当你看到一个十分酷炫的效果，慢慢的分析加实现的过程是非常能够让我产生满足感的。虽然我现在还仅仅处在依葫芦画瓢的阶段，但是我相信，只要能坚持下去，肯定会成为所谓的“大神的”，加油。

参考书籍：

《精通CSS 第二版》