使用 CSS 悬停菜单 - 分步指南
HTML
对于 HTML，我们有一个类为“menu_item”的 div 元素，它代表一个菜单项。
在“menu_item”中，第一个元素是一个带有标题的 span 元素。现在我只放一个菜单项：“Shop”，稍后我会添加其他的。
在标题下方，我们有一个带有“子菜单”类的 div 元素。这是直到悬停才能看到的子菜单。
在“子菜单”中，我们将所有子菜单作为跨度元素放置。
它应该看起来像这样：
<div class="menu_item">
<span>店铺</span><!-- title --> <div class="submenu"> <!-- submenus -->
<span>衬衫</span>
<span>鞋</span>
<span>包</span>
</div>
</div>
CSS
“menu_item” 类将用于对齐所有内容。
.menu_item {
宽度：80px；
显示：弯曲；
弹性方向：列；
证明内容：中心；
对齐项目：居中；
}
具有“menu_item”类的元素内的所有 span 元素都将具有 1px 透明边框，因为我们稍后会在悬停时对其进行着色
我们只需要添加过渡、指针、填充（上下 5px，左右 0），然后将文本居中对齐。
.menu_item 跨度 {
边框：1px 实心透明；
过渡：.3s；
填充：5px 0；
光标：指针；
宽度：100%；
文本对齐：居中；
}
在悬停时，使用“>”选择器，我们将选择直接子项，即标题，以及颜色顶部和底部边框，如前所述。
当然，我们会添加转场属性，让边框颜色平滑变化。
.menu_item:hover > span {
边框颜色：#000 透明；
过渡：.3s；
}
我们将减少所有子菜单项的字体并将它们按列对齐。
我们将宽度设置为 0，然后在悬停时返回 80px，这样我们就会有一个很好的外观效果。
让我们也隐藏所有溢出的东西。
而且，当然，过渡，这样出现的效果，前面提到的，我们会很顺利。
.子菜单{
字体大小：14px；
显示：弯曲；
弹性方向：列；
宽度：0px；
溢出：隐藏；
过渡：.3s；
}
现在只需在悬停时将宽度设置回 80px 并添加过渡。
.menu_item：悬停 .submenu {
宽度：80px；
过渡：.3s；
}
现在我们将光标属性设置为子菜单项的指针。
.子菜单：悬停{
光标：指针；
}
并为每个子菜单添加顶部和底部填充并将文本居中对齐。
.子菜单跨度{
填充：5px 0；
文本对齐：居中；
}
悬停时，只需更改背景颜色。我将设置透明黑色。
.子菜单跨度：悬停{
背景色：rgba(0, 0, 0, .1);
}
就是这样。
我们现在可以在菜单中添加更多元素。
对于具有子菜单的菜单项，只需复制并粘贴相同的 html 代码。
至于没有子菜单的菜单项，只需添加新的带有标题的 menu_item，并且没有子菜单元素。
<!-- New menu item without submenus -->
<div class="menu_item">
<span>家</span><!-- title -->
</div> <div class="menu_item">
<span>店铺</span><!-- title --> <div class="submenu"> <!-- submenus -->
<span>衬衫</span>
<span>鞋</span>
<span>包</span>
</div>
</div> <!-- New menu item with submenus -->
<div class="menu_item">
<span>设置</span><!-- title --> <div class="submenu"> <!-- submenus -->
<span>帐户</span>
<span>密码</span>
<span>安全</span>
</div>
</div>
视频教程：
您可以通过视频教程找到整个代码 这里 .
谢谢你的阅读❤️
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/11778/02260317
标签：菜单,menu,item,分步,菜单项,对齐,悬停,CSS From： https://www.cnblogs.com/amboke/p/16653050.html