内联子列表宽度转换

基本上我希望列表旁边显示其子列表，其他列表元素很好地移动（过渡），但如果我设置了溢出，它将垂直对齐子列表，如果我设置显示：没有，那么转换根本不起作用。内联子列表宽度转换

我只是想要列表与第一次测试样

试验测试工作，测试

然后在悬停和它推最后两项测试一旁顺利结束

测试的Test2 Test3的测试测试

我试过从其他线程搜索和应用方法，但我找不到任何适合它的东西，并且在IE中很好地工作。我不关心在IE中工作的过渡，只是列表工作。

<ul> 
    <li> 
     <a href="#">Test</a> 
     <ul> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Test</a> 
     <ul> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Test</a> 
     <ul> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
     </ul> 
    </li> 
</ul> 

* { 
    padding: 0; 
    margin: 0; 
    -webkit-transiton: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
} 

ul { 
    list-style: none; 
} 

ul li { 
    display: inline-block; 
} 

ul li:hover ul { 
    max-width: 10000px; 
    max-height: 10000px; 
} 

ul li ul { 
    display: inline-block; 
    max-width: 0px; 
    max-height: 0px; 

    padding: 0; 
    list-style: none; 
}

来源

2014-10-19 Yes Man

您是不是要找这样的事：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<style> 
* { 
    padding: 0; 
    margin: 0; 
} 
ul { 
    list-style:none; 
    white-space:nowrap; 
} 
ul li { 
    display: inline-block; 
} 
ul li a { 
    background:red; 
    padding:10px; 
    display:inline-block; 
} 
.menu > li > a { 
    position:relative 
} 
ul li li a { 
    color:red; 
    background:green 
} 
ul li ul { 
    display: inline-block; 
    width:0; 
    height:0; 
    max-width:0; 
    visibility:hidden; 
} 
ul li:hover ul { 
    margin-left:0; 
    width:auto; 
    height:auto; 
    opacity:1; 
    max-width:1000px; 
    visibility:visible; 
    -webkit-transiton: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
</style> 
</head> 

<body> 
<ul class="menu"> 
     <li> <a href="#">Test A</a> 
       <ul> 
         <li><a href="#">Test2</a></li> 
         <li><a href="#">Test3</a></li> 
       </ul> 
     </li> 
     <li> <a href="#">Test B</a> 
       <ul> 
         <li><a href="#">Test2</a></li> 
         <li><a href="#">Test3</a></li> 
       </ul> 
     </li> 
     <li> <a href="#">Test C</a> 
       <ul> 
         <li><a href="#">Test2</a></li> 
         <li><a href="#">Test3</a></li> 
       </ul> 
     </li> 
</ul> 
</body> 
</html>

来源

2014-10-19 15:21:25

这工作正常。 – JasonStack 2014-10-19 15:31:52

如何转换回隐藏？我怎么能顺利地把顶级名单放回原来的位置？有淡入，但我不知道。另外，最后一个元素无法正常工作。 – 2014-10-19 15:55:24

您可以改用margin-left，然后按照http://codepen.io/paulobrien/full/pcGzb/的方式进行操作。 – 2014-10-19 19:23:36

过渡规则不能适用于CSS展示风采。这可能是一个解决方案，你可以尝试： Transitions on the display: property

来源

2014-10-19 15:38:23 optimus203

内联子列表宽度转换

回答

相关问题