我们要讲的是html导航条下拉菜单的制作。首先，看一个完整的示例代码：

风格。下拉列表{

位置：相对；

display : inline-block；

}。下拉列表-内容{

display:none

position:absolute值；

背景-color : # F9 F9 f 9；

最小宽度width:160px

box-shadow :0 px8 px16 px0 pxrgba(0，0，0，0.2)；

padd :12 px 16 px；

z-索引：1；

}

. drop down : hover . drop down-content {

display:block

}

/style

divclass='dropdown '

Spanphp中文网站/span

div class=' down-content '

菲尔普斯世界！/p

菲尔普斯世界！/p

/div

/div

你能理解这段代码吗？

不懂也没关系。有个解释。解释完了你就明白了。

html导航栏菜单实例分析；

html导航栏菜单的HTML部分：

我们可以用任何HTML元素打开下拉菜单，比如span或者abutton元素。

使用容器元素(如div)来创建下拉菜单的内容，并将其放置在您想要的任何位置。

用div元素包装这些元素，并使用CSS来设置下拉内容的样式。

html导航栏菜单的CSS部分：

那个。dropdown类使用position:relative，它将下拉菜单的内容放在下拉按钮的右下角(使用position:absolute)。

实际的下拉菜单在。下拉内容类。默认情况下，它是隐藏的，并将在鼠标移动到指定元素后显示。请注意，最小宽度的值设置为160像素。可以随意修改。注意：如果要设置下拉内容的宽度与下拉按钮的宽度一致，可以将宽度设置为(overflow:auto设置可以在小屏幕上滚动)。

我们使用框阴影属性使下拉菜单看起来像一张“卡片”。

当用户将鼠标移到下拉按钮上时，悬停选择器用于显示下拉菜单。

看了解释，现在有点明白了。把这些解释带到上面的代码，然后理解。

现在让我们看看浏览器中上述代码的效果：

tuyi.png

这是默认情况，它根本不会出现，就像文本一样，但是当您向上移动鼠标时，它会发生变化：

tuer.png

看，这就是代码的效果。有一个导航栏下拉列表和一个不可见的导航栏。鼠标移动才能有反应。

这是导航栏下拉菜单的简单制作。如果你有任何问题，可以在下面留言。

本文转载自中文网站