html - 在可滚动菜单栏上完全显示工具提示的解决方案
问题描述
我正在尝试制作一个下拉菜单栏,如果我将鼠标悬停在项目工具提示上,则会显示一些文本。
我得到了结果 A,我希望得到像 B 这样的结果,其中工具提示没有被下拉菜单覆盖一半。
我假设由于我的 span 元素位于锚元素内,因此它不可能从下拉菜单中弹出,或者可能是由于溢出属性,但我不确定如何修复或更改我的为了实现B的代码,我也不想增加下拉菜单的宽度来实现这一点,也就是说我不希望工具提示文本受到下拉菜单的限制。
有没有一个方向可以实现我的要求?
代码如下:
HTML
<ul id='menu'>
<li>choose
<ul>
<li><a class="tooltip" href="">a<span class="tooltiptext">this is a</span></a></li>
<li><a class="tooltip" href="">b<span class="tooltiptext">this is b</span></a></li>
<li><a class="tooltip" href="">c<span class="tooltiptext">this is c</span></a></li>
<li><a class="tooltip" href="">d<span class="tooltiptext">this is d</span></a></li>
</ul>
</li>
CSS
#menu > li {
display:inline-block;
border:1px solid grey;
position:relative;
}
#menu li ul {
position:absolute;
border:1px solid grey;
list-style-type: none;
max-height:0;
overflow:hidden;
}
#menu li:hover ul {
overflow-y:scroll;
overflow-x:hidden;
max-height:150px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
解决方案
推荐阅读
- c++ - directory_entry 的输出与具有变体的类的重载 ostream 运算符<< 冲突
- html - Ionic5 侧边菜单 - 仅限于特定视图
- spring - 使用 Spring 根据配置参数注入正确的实现
- sql - 更新/替换更新太多记录的 SQL 查询
- php - Laravel Collection <> 非数据库实体的模型混合?
- python - 我知道即使 scikit-bio 已成功安装,也没有 skbio 模块
- c++ - 使用 for 循环 C++ 计算浮点类型平均值
- php - Laravel:无效的参数号:未定义参数
- events - 基于事件的与版本化事件的集成
- amazon-web-services - 用于 SFTP 只写存储桶访问的 AWS 传输?