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

如果您每天都能理解和掌握一个概念，那么每一天，您都是更好的自我.

打开门，看看今天会发生什么:

图1下拉框实现效果

当鼠标移到服务选项卡上时，将出现一个下拉框.

在编写代码之前，最好先分析具体要求.

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

图2部分

第1部分是导航的主要部分，第2部分是下拉菜单的一部分. 整个导航栏分为两部分的原因是因为我习惯于将大问题分解为多个小问题，然后一一分解. 我认为这是一种良好的思维习惯，因为小问题通常更容易解决，而大问题通常更宏观且更难控制.

除了第2部分之外，我们首先实现第1部分.

根据经验，我们可以轻松实现第1部分，实际上这是一个简单的ul.

下面的代码的屏幕截图:

图3第1部分的实现

在上述实现中，知识的关键点涉及浮动和浮动原则. 对这件产品不太熟悉的童鞋可以参考张新旭的文章“ CSS Float的深入研究，详细说明和扩展”.

实施第1部分之后，让我们考虑如何实施第2部分. 仔细观察图1，您会发现services选项卡下的下拉菜单应该是与服务处于同一级别的ul标签. . 之后，让我们尝试将ul添加到效果中. 代码更新如下所示

图4添加子菜单

运行并观察更改

图5添加子菜单

接下来，在子菜单中添加一些样式

图6向子菜单添加样式

效果如下

图7子菜单效果

从图7中可以看到，图1中的需求已经形成. 现在的问题非常简单，当鼠标未移入服务标签时如何使子菜单消失，而当鼠标移至服务标签时如何显示子菜单？在这里，我们将使用绝对定位和悬停伪类.

请参阅下面的代码以获取详细的了解.

图8最终代码

这时，实现了一个简单的导航栏和下拉菜单.

我第一次写技术博客，感觉仍然有很多缺点. 我自己也尝试过多次盲目写作，也意识到了这个简单的例子. 在实施过程中，我逐渐对其中涉及的一些概念有所了解css 导航菜单，但是仍然存在许多不足. 这只是CSS路径的第一步，还有很长的路要走，我希望我能坚持下去. 与js相比，我更喜欢学习CSScss 导航菜单，因为我认为CSS更有趣. 您的代码的每一行可能会产生不同的效果，当您看到非常酷的效果时，缓慢的分析和实现过程令我非常满意. 尽管我仍处于按照葫芦拔勺的阶段，但我相信，只要我能坚持下去，我一定会成为所谓的“伟大的上帝”.

参考书:

“精通CSS第二版”

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-263346-1.html