计算机, 软件
如何使一个下拉菜单，CSS
今天，我们会考虑的“如何创建一个下拉菜单CSS？”的问题。 应该说一次，这个项目将在不连接任何额外的资金进行。 也就是说，菜单将只与CSS和HTML创建。
训练
为了充分了解它是什么的文章中，你需要一点点地得到与理论认识的材料。 但是，如果你熟悉伪类，你可以跳过这一段。 因此，建立一个垂直下拉菜单CSS，我们需要一个元素«：悬停»。 伪«：悬停»可以被分配到任何 HTML标签。 它允许您定义，当一个项目将鼠标悬停的瞬间。 例如，我们已经约定财产：«：悬停{颜色：红色;}»。 此项意味着当你悬停鼠标会变成红色的任何标签的内容。 值得注意的是，这个伪元素也被灭活。 顺便说一句，«：悬停»有相关类似的元素。 但从这一点，我们将创建一个伪CSS下拉菜单。
指令
首先，让我们了解什么是一个下拉菜单。 根据这一定义得到了很多不同的方法构建不同的布局。 在这种情况下，我们将分析的结构包括几个经常可见的项目和一些附加的（隐藏）。 让我们结束与理论，并开始练习。
- 我们创建菜单的布局。 要做到这一点，HTML代码标签。 创建嵌套列表：
-
- < / UL>。 这样的事情应该看起来像你的下拉菜单。 CSS以后介入。 在这种情况下，主列表包括封闭的三个主要领域和两个。
- 隐藏子菜单。 为此，我们使用样式表，定义以下属性：UL UL {显示：无;} 这将删除从屏幕上第二列表的元素。
- 创建CSS菜单，从主列表下拉。 在级联样式表写入以下规则：UL李：悬停UL {显示：块;}。 此条目意味着，当鼠标在元件里，它位于UL列表显示在屏幕UL（附后）。 乍一看，这种方案可能看起来扑朔迷离。 但事实上，一切都非常简单。
- 通过插入标记
- 您的内容使用自己这个布局。 您可以更改列表中元素的个数。
装饰的变化
一旦主菜单布局已准备就绪，就可以进行注册。 也许，很多摆在首位愿意摆脱指示列表项标记。 这是使用一个单一的财产CSS，即列表样式类型来完成的。 您需要添加以下条目：李{列表样式类型：无;}。 然后，你可以插入帧，使 背景。 边框和背景帮助你与此有关。 或许有些人会不喜欢的下拉菜单中会显示为一个列表，在相同的基本要素推动。 为了解决这个问题，你可以定位。 要做到这一点，级联样式表写上如下条目：UL UL {位置：绝对的; 左：15px的; 右：15px的; 顶部：15px的; 底部：15像素;}。 当然，值你会用你自己的。 这取决于你想看到的下拉菜单，CSS将提供更多的功能，可以添加各种效果和装饰我们的名单。
结论
再次值得注意的是菜单布局建设。 要分配在这种情况下嵌入值中使用的CSS规则，例如，UL UL。 如果你的文件，以满足其他类似的结构，可能会有很大的问题。 在这种情况下，你需要使用一个特定的目的，例如，选择或ID-ID的。 以上文章布局下拉菜单的设计，熟悉的一般设计。 这项工作的休息停留在你的肩膀上。
Similar articles
Trending Now