Question

我现在正处理一个有趣的问题。我有一个菜单，其中包含列表中的嵌套列表。像这样：

<ul id="menu">
  <li class="menu-item">
    <div class="icon"></div>
    <ul id="sub-menu">
      <li class="sub-menu-item">
         <div class="icon"></div>
         <span class="title">Icon title</span>
      </li>
    </ul>
  </li>
</ul>

具有类title的Span元素应该隐藏在屏幕外，并且应该在悬停时弹出。我的问题是，我无法强制将这个弹出的范围强制到两个菜单下面的“ slide ”。

这是fiddle。

我做错了什么？我没有设计页面，我只是想让它工作。

注意： “图标”类让人联想到旧版本，用户可以在菜单中显示的图标或文字之间切换。

更新

我找到了解决方法。我没有将标题 span隐藏在屏幕外，而是将其可见性更改为隐藏并在悬停时显示。唯一的问题是文本显示没有过渡效果，当转换速度较慢时它看起来很糟糕。

span.title {
  position: absolute;
  height: inherit;
  background-color: #3a5fcd;
  line-height: inherit;
  padding: 0 .5rem;
  white-space: nowrap;
  transition: all ease-in-out 0.1s;
  width: 0px;
  visibility: hidden;
}

&:hover, &:focus {
  span.title {
    left: 100%;
    width: auto;
    transition: all ease-in-out 0.1s;
    width: 10em;
    visibility: visible;
  }
}

以下是更新fiddle.

的链接

具有弹出效果的菜单“标题”转换

0 个答案: