如何将悬停在 Table- 单元格列表项上的文本动画化？

Question

我不确定这是否可能，但这是我正在努力实现的目标：

我想要 CSS 列表项之间宽度不等的导航菜单。我发现这样做的唯一方法是使用 table-cell。但是，一旦悬停，我想播放动画：

列表项向下展开
文本向左移动
字体符号从顶部出现在中间。（还没有）

同时进行。

类似于此按钮： enter code herehttp://codepen.io/Savantos/pen/mHIpt

但是我做不到 happen.So 很远，我只能让列表项向下展开： enter code herehttp://jsfiddle.net/reizer/tekh8vrm/

为了让文本向左移动而不影响整个单元格，似乎是使用绝对位置。但在那种情况下，它使所有单元格宽度相等。我已经尝试在一个单元格内使用多个 div（为它们指定特定的 px 宽度），它们都同样地拉伸单元格的宽度。无赖。

如果我使用 padding-right w/o 绝对定位，它会拉伸整个单元格，看起来很傻。

我不明白如何拥有 table-cell 项目，并且在它里面有绝对定位的项目，这些项目按照我想要的方式运行而不影响单元格。也许还有另一种方法可以在不影响单元格宽度的情况下移动文本。

***** 更新 *****

所以我稍微弄乱了负边距，并在悬停时得到了平滑的文本定位，但只要我浮动 div 元素，我就无法像前面的示例那样让它们平滑展开：

https://jsfiddle.net/reizer/uozkehad/

Answer 1

好的，我想我终于做到了。不确定代码有多好，但它至少适用于最新的浏览器。

* {
 padding: 0px;
 margin: 0px;
 list-style-type: none;
 font: 1em/0em Arial, Tahoma, Helvetica, sans-serif;
}
.head {
 background: #F66;
 padding: 0.5em;
 color: #FF0;
 font: 2em "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.wrap {
 margin: auto;
 max-width: 960px;
}
nav {
 display: table;
 background: #00F;
 width: 100%;
}
nav ul {
 display: table-row;
 background: #FC9;
}
nav ul li {
 display: table-cell;
 background: #C3F;
 position: relative;
}
nav ul li a {
 color: #000;
 text-decoration: none;
 height: 2em;
 position: relative;
 background: #EBEBEB;
 display: block;
 text-align: center;
 text-indent: 20px;
 padding-right: 20px;
 border: solid #000;
 border-width: 0 1px 0 0;
 line-height: 2em;
 -webkit-transition:all 0.5s ease;
} nav ul li:last-child a{border:none}
nav ul li a:hover {
 position: relative;
 background: #EBEBEB;
 text-indent: 0px;
 padding-right: 40px;
}
nav ul li a::before {
 font-family: FontAwesome;
 content: "\f078";
 position: absolute;
 right: 1em;
 margin-top: -0.85em;
 visibility: hidden;
 opacity: 0;
 -webkit-transition: all 0.5s ease;
}
nav ul li a:hover::before {
 margin-top: 0em;
 visibility: visible;
 opacity: 1;
}

nav ul li a ul li {
 position: absolute;
 background: #FF0;
 display: block;
 width: 100%;
 height: 0em;
  visibility: hidden;
 opacity: 0;
 -webkit-transition:height 0.5s ease, opacity 0.0s ease 0.5s, visibility 0.0s ease 0.5s;
}
nav ul li a:hover ul li {
 visibility: visible;
 opacity: 1;
 height: 1em;
 -webkit-transition:height 0.5s ease;
}

<div class="head">logo</div>
<div class="wrap">
  <nav>
    <ul>
      <li><a href="#">Home<ul><li></li></ul></a></li>
      <li><a href="#">About<ul><li></li></ul></a></li>
      <li><a href="#">Products<ul><li></li></ul></a></li>
      <li><a href="#">FAQ<ul><li></li></ul></a></li>
      <li><a href="#">Support<ul><li></li></ul></a></li>
      <li><a href="#">Contact<ul><li></li></ul></a></li>
    </ul>
  </nav>
</div>
<div class="head"></div>

如何将悬停在 Table- 单元格列表项上的文本动画化？

How to Animate Text to Left on Hover on Table-Cell List Items?

css

listitem

button

css-animations