使用HTML和CSS创建下拉菜单

内容

踩
第1部分，共2部分：编写HTML
第2部分，共2部分：编写CSS
尖端

通过下拉菜单，您可以创建页面上所有重要部分以及该页面包含的小节的清晰，层次结构的概述。您只需要将鼠标移到主要部分上，即可显示子部分。您可以仅使用HTML和CSS创建下拉菜单。

踩

第1部分，共2部分：编写HTML

创建您的导航部分。 通常，对于整个网站的导航栏，请使用nav>；对于页面绑定的较小链接部分，请使用header>；如果似乎没有其他选择适合，则使用div>。将其放置在div>元素中，以便可以调整容器和菜单本身的样式。
- div>
- 导航>
- /导航>
- / div>
给每个部分一个类属性。 稍后我们将使用class属性使用CSS修改这些元素的样式。给容器和菜单赋予它们自己的类属性。
- div>
- 导航>
- /导航>
- / div>
添加菜单项列表。 无序列表（ul>）包含主菜单的项（列表项li>），如果用户将鼠标移到该菜单上，则他/她将看到下拉菜单。将“ clearfix”类添加到您的列表元素中；我们稍后会在CSS电子表格中进行介绍。
- div>
- 导航>
- ul>
- li>家/ li>
- li>员工
- li>联系方式
- / li>
- / ul>
- /导航>
- / div>
添加链接。 如果这些顶级菜单项也链接到它们自己的页面，则现在可以插入链接。链接到不存在的锚点（例如“＃！”），即使它们没有链接到任何东西，用户的光标也会看起来不同。在此示例中，Contact无处可走，但是其他两个菜单项却可以：
- div>
- 导航>
- ul>
- li>a href =“ /”>家/一>/ li>
- li>a href =“ /员工”>职员/一>
- / li>
- li>a href =“＃！”>接触/一>
- / li>
- / ul>
- /导航>
- / div>
为下拉菜单项创建子列表。 创建样式后，这些列表构成下拉菜单。将列表放在用户将鼠标悬停的列表项中。像以前一样添加一个class属性和一个链接。
- div>
- 导航>
- ul>
- li> a href =“ /”>主页/ a> / li>
- li> a href =“ /员工”>员工/ a>
- ul>
- li> a href =“ / borsato”> Marco Borsato / a> / li>
- li> a href =“ / titulaer”> Chriet Titulaer / a> / li>
- / ul>
- / li>
- li> a href =“＃！”>联系人/ a>
- ul>
- li> a href =“ mailto：[email protected]”>报告问题/ a> / li>
- li> a href =“ / support”>客户支持/ a> / li>
- / ul>
- / li>
- / ul>
- /导航>
- / div>

第2部分，共2部分：编写CSS

打开您的CSS样式表。 如果该链接尚不存在，则将其链接发布到HTML文档头部的CSS样式表中。在本文中，我们将不介绍CSS的基础知识，例如设置字体和背景色。
添加clearfix代码。 还记得在菜单列表中添加“ clearfix”类吗？通常，下拉菜单的元素具有透明背景，允许其他元素移动。对CSS的简单修改就可以解决此问题。这是一个不错的快速修复程序，尽管它在Internet Explorer 7和更早版本中不起作用：
- .clearfix：{
- 内容： ””;
- 显示：表；
- }
创建基本设计。 使用此代码，您可以将菜单放在页面顶部，并隐藏下拉菜单元素。这很简单，因此我们可以专注于相关代码。您可以稍后使用其他CSS代码（例如padding和margin）对其进行修改。
- .nav-wrapper {
- 宽度：100％;
- 背景：＃008B8B;
- }
- .nav菜单{
- 职位：相对
- 显示：inline-block;
- }
- .sub菜单{
- 位置：绝对；
- 显示：无；
- 背景：＃555；
- }
将鼠标悬停在下拉菜单项上时，使它们出现。 现在已设置下拉列表中的元素，以便不显示它们。将鼠标悬停在“父级”上时，可以通过以下方法显示整个子列表：
- .nav-menu ul li：悬停> ul {
- 显示：块；
- }
- 注意-如果其他菜单隐藏在下拉菜单的菜单项中，则此处添加的属性将适用于所有菜单。如果只希望样式应用于下拉菜单的第一级，请改用“ .nav-menu> ul”。
用箭头指示有一个下拉菜单。 Web设计人员通常使用向下箭头显示元素将打开下拉菜单。此代码将该箭头添加到菜单中的每个元素：
- .nav菜单> ul> li：{之后
- 内容：“ 25BC”； / *向下箭头的unicode转义 * /
- 字号：.5em；
- 显示：块；
- 位置：绝对；
- }
- 注意-使用属性top，bottom，right或left调整箭头的位置。
- 注意-如果并非所有菜单项都具有下拉菜单，请不要更改整个班级导航菜单的外观。而是将另一个类（例如下拉列表）添加到要使用箭头的每个li元素。请参考上面的代码中的该类。
调整填充，背景和其他属性。 菜单现在应该可以使用，但是还不是很好。使用CSS中的属性，您可以自定义每个类或元素的外观以及它们的位置。