-3

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

观察：

<!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 不允许我嵌套选择器块？

4

3 回答 3

2

而不是这样做：

#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; 
}
于 2011-06-01T03:19:59.713 回答
2

你不能嵌套语句。这不是 CSS 的正确用途。

来自维基百科：

级联样式表 (CSS) 是一种 样式表语言，用于描述以标记语言编写的文档的表示语义（外观和格式）。它最常见的应用是为用 HTML 和 XHTML 编写的网页设置样式，但该语言也可以应用于任何类型的 XML 文档，包括纯 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/

于 2011-06-01T03:20:09.273 回答
0

其他人已经向您展示了如何解决问题，但无论如何您都不应该这样做；尽管它是一种创建菜单的好方法，但它跨越了内容-呈现-行为规则的界限。尽管可能无关紧要，但下拉菜单的代码属于 JavaScript。

于 2011-06-01T03:43:30.813 回答