如何在表格单元列表项上悬停时将文本动画到左侧？

Question

我不确定这是否可能，但这是我想要完成的：

我希望 CSS 导航菜单在列表项之间具有不相等的宽度。我发现这样做的唯一方法是使用表格单元格。但是，一旦悬停，我想播放动画：

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

同时进行。

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

但是我做不到。到目前为止，我只能让列表项向下扩展： enter code herehttp://jsfiddle.net/reizer/tekh8vrm/

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

如果我在不使用绝对定位的情况下进行右填充，它会拉伸整个单元格，使其看起来很傻。

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

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

所以我稍微弄乱了负边距，并在悬停时获得了平滑的文本定位，但只要我浮动 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>