表格行宽度100％不尊重父级

Question

我有一个codepen示例：http://codepen.io/19wolf/pen/myrOew?editors=110

您会注意到“第一项”的下拉列表横跨整个页面。如何强制它适合“第一项”和“第一项”（项目数量可变）？我尝试将li:hover ul从display: table更改为display: table-row，但所做的只是使项目比“第一项”更短。

我在过去使用当前的html设置确实让它工作了，但是css迷失了......

我正在运行的半实时网站是apoxz.org/new

Answer 1

给出相对于你的li的位置，其中包含另一个ul级别：

nav li {
    display: table-cell;
    padding: 0 .5em;
    position : relative;
}

Answer 2

您需要在悬停上设置 li 宽度：

nav {
	font-family: 'Roboto',sans-serif;
	font-weight: 300;
	display: table;
}

nav ul {
	list-style: none;
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

nav li {
	display: table-cell;
	padding: 0 .5em;

}

nav a {
	background: #0033ab;
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 1em;
	text-align: center;
}
nav a:hover {
	background: #f7b512;
	color: #000;
}

nav ul ul {
	display: none;
	position: relative;
}

nav ul li:hover ul {
   display: table;
   table-layout: fixed;
   position: absolute;
	width:30%;
	overflow: hidden;
}

nav ul li:hover ul {
	display: table;
	table-layout: fixed;
	position: absolute;
	max-width: 100%;
}

nav ul li:hover ul li {
	display: table-row;
	border-top: 1px solid #000;
	max-width: 100%;
}

<nav>
  <ul>
    <li>
      <a>Item One</a>
      <ul>
        <li>
          <a>SubOne</a>
        </li>
        <li>
          <a>SubTwo</a>
        </li>
        <li>
          <a>SubThree</a>
        </li>
      </ul>
    </li>
    <li>
      <a>Item Two</a>
    </li>
    <li>
      <a>Item Three</a>
    </li>
  </ul>
</nav>