menu - CSS アコーディオン + インラインブロックの問題

Question

CSS アコーディオン メニューに問題があります...

ここに示すように、作成者に素敵なスライダーがあります: http://jsfiddle.net/LedZep257/hDzyH/1/

しかし、リストの間隔が適切ではないため、一部のアイテムが完全に表示されていません。

インラインブロックを使用すると、間隔は適切ですが、スライダー全体が台無しになります: http://jsfiddle.net/LedZep257/hDzyH/

誰でも助けてもらえますか、これを修正する方法はありますか?

Answer 1

さまざまなメジャーでトランジションを設定することはできないと思います.「自動」と「％」は異なるメジャーであると思います.トラブルが多すぎて本当に必要な場合は、トランジションを設定するために1つのメジャーのみを使用できます.それを成し遂げるには、それを修正する「em」meby のような別の手段を使用しないでください。

例えば

.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*/
}