menu - CSS Accordion + inline-block 问题

Question

我的 css 手风琴菜单有问题...

我创建了一个不错的滑块，如下所示：http: //jsfiddle.net/LedZep257/hDzyH/1/

但是 lis 没有很好地间隔，这意味着某些项目没有完全出现。

当我使用内联块时，间距是正确的，但它弄乱了整个滑块：http: //jsfiddle.net/LedZep257/hDzyH/

任何人都可以帮助/有没有人有任何想法如何解决这个问题？

Answer 1

我认为你不能在不同的措施中设置过渡，我认为“自动”和“％”是不同的措施，你可以只使用一种措施来设置过渡，如果你有太多的麻烦，你真的需要要做到这一点，为什么不使用另一种措施，如“em”meaby 来解决它。

例如

.horizontalaccordion>ul>li
{
display: inline-block;
overflow: hidden;
float: left;
margin: 0;
padding: 0;

list-style: none;
width: 8em; /*I was here*/
height: 40px;
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
transition: width 0.6s ease-in-out;
-moz-transition: width 0.6s ease-in-out;
-webkit-transition: width 0.6s ease-in-out;
-o-transition: width 0.6s ease-in-out;
}

.horizontalaccordion>ul>li>h3
{
display: inline-block;
float: left;
margin: 0;
padding: 10px;
padding-left:19px;
padding-right:18px;
height: 19px;
width: 8em; /*I was here*/
border-left: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
white-space: nowrap;
filter: progid;
-ms-filter: progid;
}

.horizontalaccordion>ul>li:hover
{
overflow: hidden;
width: 60em; /*I was here, I just set 60em for example*/
}

.horizontalaccordion:hover li
{

    width: 0em; /*I was here*/
}