如何创建下拉式CSS菜单(Create Drop down CSS Menus)？

层叠样式表（CSS）是一个用于描述超文本标记语言（HTML）或可扩展标记语言（XML）文档格式的名称。它可以用于任何类型的XML文档，但最常用于用HTML编写的网页。CSS可用于在网页上创建下拉菜单。下拉CSS菜单具有在访问者使用鼠标悬...

层叠样式表（CSS）是一个用于描述超文本标记语言（HTML）或可扩展标记语言（XML）文档格式的名称。它可以用于任何类型的XML文档，但最常用于用HTML编写的网页。CSS可用于在网页上创建下拉菜单。下拉CSS菜单具有在访问者使用鼠标悬停在菜单上之前显示的单个文本项，此时将显示项目的整个列表。菜单是使用CSS标识和类标记创建的。类描述包含在两个大括号之间。下拉式CSS菜单以ID选择器开头。此选择器看起来像#，后跟ID名称。您可以为ID命名任何内容，但它应该是描述性的，以便其他人可以阅读您的代码。例如，下拉菜单可以使用代码drop1。使用类选择器为下拉菜单中的第一项创建类，它看起来像句点。该类将是HTML列表元素的一部分。列表元素由字符“li”指定。通过键入“li.top”创建顶级类。类描述包含在两个大括号之间。下面的示例显示了列表中第一个项的完整CSS代码：#drop1 li.top{font-family:Verdana，Geneva，san-serif；font-size:100%；color:#FF00FF；}下一步，为将隐藏在CSS菜单中第一项下的项创建一个类。该类将描述用字符“ul”指定的HTML无序列表。该描述与顶级菜单项基本相同，再加上一句话”显示：无#59“在说明的开头。这表示在指针悬停在下拉CSS菜单上之前，无序列表中的项目将被隐藏。下面是这部分CSS代码的示例：#drop1 ul链接{显示：无#59font-family:Verdana，Geneva，san serif；字体大小：100%；颜色：#FF00FF；}您希望下拉式CSS菜单显示在HMTL文档的其余部分上。否则，当访问者将鼠标悬停在菜单上时，它会将文档的其余部分向下推，为列表腾出空间。将position元素设置为absolute就可以了。设置位置的代码是：#drop1{位置：绝对；}这就是下拉菜单的CSS部分所需的全部内容。下拉菜单的其余部分是在HTML文档中使用“div”、“id”、“class”、“li”和“ul”元素创建的。“div”标记分隔文档的菜单部分。键入div id=“drop1”创建下拉菜单部分。然后启动无序列表使用HTML“ul”元素。将top类添加到第一个列表项，并为其余项添加link类。HTML代码应该类似于：div id=“drop1”li class=“top”top item/li li class=“link”a href=“#”项/a/li li class=“link”a href=“35;”项/a/li li class=“link”a href=“35;”项/a/li/ul/div浏览器中，下拉式CSS菜单将在页面上显示为单个项目。当您将鼠标移到顶部项目上时，菜单的其余部分将显示。页面上的其余文本将不会移动，但菜单将隐藏一部分

发表于 2020-08-06 23:35
阅读 ( 838 )
分类：电脑网络

如何创建下拉式CSS菜单(Create Drop down CSS Menus)？

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章