Question

我只是想在下拉菜单中创建另一个下拉菜单效果。

观察：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="javascript/class-lib.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="wrapper">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#" class="selected">Parent 02</a>
            <ul>
                <li><a href="#">Item 01</a></li>
                <li><a href="#" class="selected">Item 02</a></li>
                <li><a href="#">Item 03</a></li>
            </ul>
            <div class="clear"></div> <!--".clear" div is nested within the .selected class, outside of the <ul>. Does this provide a buffer??? -->
        </li>
        <li><a href="#">Parent 03</a>
        <ul>
            <li><a name="child" href="#">Child 04</a>
                <ul>
                    <li><a href="#">Item 01</a></li>
                    <li><a href="#">Item 02</a></li>
                    <li><a href="#">Item 03</a></li>
                </ul>
            </li>
            <li><a href="#">Item 05</a></li>
            <li><a href="#">Item 06</a></li>
            <li><a href="#">Item 07</a></li>
        </ul>         
            <div class="clear"></div>
        </li>
        <li><a href="#">Parent 04</a></li>
    </ul>
    <div class="clear"></div>
</div>
</body>
</html>>

CSS：

#nav li ul li a:hover{

                #nav li ul li ul li a{
                        visibility:visible;   /*<-- the only reason why I did that was to see if something like this would actually work. It doesn't. I gotta say I'm really not a fan of this language. While I'm sure there were reasons for not implementing this kind of method and design/scripting pattern, it seems like there are just as well plenty reasons TO implement it. */  
                }
        }

        #nav li ul li ul{
        display:block;
        list-style:none;
        }

        #nav li ul li ul li{
        float:right;
        clear:both;
        width:50px;
        height:100px;
        background:#000;
        }

        #nav li ul li ul li a{
        visibility:hidden;
        color:#fff;
        }

我这样做的唯一原因是看看这样的事情是否真的有效。它没有。我得说我真的不喜欢这种语言。虽然我确信有理由没有实现这种方法和设计/脚本模式，但似乎有充足的理由来实现它。

为什么CSS不允许我嵌套选择器块？

Answer 1

而不是：

#nav li ul li a:hover{

                #nav li ul li ul li a{
                        visibility:visible; 
                }
}

应该是：

#nav li ul li:hover ul li a
{
    visibility:visible; 
}

Answer 2

您无法嵌套语句。它不适合CSS。

来自Wikipedia：

级联样式表（CSS）是一个用于描述的样式表语言演示语义（外观和格式化文件 用标记语言。最常见的应用程序是为网页设置样式用HTML和XHTML编写，但是语言也可以应用于任何语言一种XML文档，包括plain XML，SVG和XUL。

CSS不是像JavaScript这样的脚本语言，所以它的行为不像一个。它只是告诉浏览器显示什么以及如何显示它。这只是它的主要目的。

但方式可以在纯CSS中执行您想要的操作。虽然您无法嵌套规则声明，但您仍然可以以极好的方式应用它们：

element subelement {
  display: none;
}

element:hover subelement {
  display: block;
}

这是纯CSS中下拉菜单背后的基本逻辑。可以认为:hover是一个为要悬停的元素添加一个类并从那里开始工作的东西。

如果你想要一个完整的教程，这里有一个很有希望的教程：http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/

Answer 3

其他人已经向您展示了如何解决问题，但不管怎么说，您不应该这样做;虽然它是创建菜单的一种很好而且干净的方式，但它跨越了内容呈现 - 行为规则的边界。虽然它可能并不重要，但下拉菜单的代码属于JavaScript。

为什么CSS不允许我嵌套选择器块？

3 个答案: