1

我想基于以下 HTML/CSS 创建一个下拉菜单视图：

<!DOCTYPE html>
<html>
    <head>
        <style>
        html * {
            margin: 0;
            padding: 0;
            }
        body {
            color: #FFF;
            }
        #panel, #content {
            position: absolute;
            top: 0;
            bottom: 0;
            }
        #panel {
            left: 0;
            width: 750px;
            background: #333;
            z-index: 100;
            padding-top: 200px;
            padding-left: 250px;
            }
        #content {
            background: #000;
            left: 250px;
            right: 0px;
            }
        #panel > nav {
            margin-bottom: 100px;
            }
    .Dropdown {
        position: relative; /* Has to be set, can be overriden */
        }
    .Dropdown > ul {
        position: absolute;
        display: none;
        list-style-type: none;
        }
    .Dropdown:hover > ul {
        display: block;
        }
    .Dropdown > ul, /* On the right by default */
    .Dropdown.Right > ul { /* Deploys on the right side of the label */
        top: 0;
        left: 100%;
        }
    .Dropdown.Bottom > ul { /* Deploys below the label */
        top: 100%;
        left: 0;
        }
    </style>
</head>
<body>
    <div id="panel">

        <nav class="Dropdown Right" style="width: 200px;"><!-- so it can appear on jsfiddle -->
            <div class="Label Parent">Label</div>
            <ul>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <div class="Label">Entry</div>
                </li>
                <li>
                    <nav class="Dropdown Right">
                        <div class="Label Parent">Label</div>
                        <ul>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                            <li>
                                <nav class="Dropdown Right">
                                    <div class="Label Parent">Label</div>
                                    <ul>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                        <li>
                                            <div class="Label">Entry</div>
                                        </li>
                                    </ul>
                                </nav>
                            </li>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                            <li>
                                <div class="Label">Entry</div>
                            </li>
                        </ul>
                    </nav>
                </li>
            </ul>
        </nav>

    </div>
    <div id="content">
    </div>
</body>

我希望开发人员能够扩展此下拉 CSS 以添加例如 0 和 1 不透明度之间的过渡。实际上，这段代码是不可能的，因为属性显示与转换冲突。由于该显示属性，在非悬停上添加不透明度 0 和在悬停上添加不透明度 1 将不起作用。我在这个网站的某个地方读到我可以使用 height 0 和 height auto 而不是 display none 和 display block （分别），但它也不起作用。请问有关于如何添加过渡的任何想法吗？谢谢你的帮助 ！

4

0 回答 0