您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识

html下拉菜单怎么写

菜单,主菜,鼠标html下拉菜单怎么写

发布时间：2019-02-08加入收藏来源：互联网点击：

方法2113如下：

方法1:

HTML

1、为CSS菜单5261创建HTML代码框架。Class=' NAV '属性的' DIV '标签4102标签用作菜单的容器。在屏幕截图1653中，在图的HTML代码中表示主菜单项的简单无序列表(ul)。

2、在主菜单区域添加链接。此步骤将向无序列表(ul)中的每个项目添加链接。

3、在“我们的信息(AboutUs)”下的LI标签内添加无序列表，表示指向子菜单的链接。

4、在HTML代码中添加样式表链接。目前已完成HTML代码。其内容是清晰的菜单和子菜单的分层布局结构。使用外部CSS样式表，因此必须在代码的“头”区域中添加样式表链接。

方法2:

CSS

1、创建CSS文件。完成HTML框架代码后，必须使用样式表实现以下菜单功能：您可以使用CSS选择器在HTML中查找菜单项，因此不需要向HTML添加ID或class属性。

通过嵌入在UL中的UL查找子菜单，并使用display:none。隐藏属性。

如果将鼠标悬停在LI元素上，则必须将其转换为block模式并再次显示相应的子菜单，命令将查找鼠标悬停位置的LI元素。

2、使用CSS样式表显示主菜单。

Position:relative:声明根据子菜单在主菜单中的相对位置显示子菜单。

display : inline-block；声明可以将菜单调整到适当的宽度。

3、放开鼠标光标时设置字体渐变颜色。图片中的代码在鼠标悬停时将链接更改为深色渐变背景和白色文字的字体。

4、使用样式表显示子菜单。当前子菜单样式继承主菜单元素。我将在主菜单项下垂直显示子菜单项。

5、寻找下拉式功能表并排序功能表项目。这样也会移除灰色背景。

Position:relative:必须将声明添加到列表项的顶部。

Position:absolute:声明必须添加到相对位置位置位置列表中。

本文到此结束，希望对大家有所帮助呢。