Question

基本上我希望列表旁边显示其子列表，其他列表元素很好地移动（转换）但如果我设置溢出它垂直对齐子列表，如果我设置display：none则转换don完全不起作用。

我只希望列表像

一样工作

测试测试测试

然后在第一次测试时悬停并将最后两个测试顺利推到一边

测试测试2测试3测试测试

我已尝试从其他线程中搜索和应用方法，但我找不到任何适合它的方法，并且很好地在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;
}

Answer 1

你的意思是这样的：

<!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>

Answer 2

转换规则无法应用于CSS中的显示样式。这可能是您可以尝试的解决方案： Transitions on the display: property

内联子列表宽度转换

2 个答案: