我只是想在下拉菜单中创建另一个下拉菜单效果。为什么CSS不允许我嵌套选择器块?
观察:
<!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不允许我嵌套选择器块?
你面临的问题是什么?我们不坐在这里观察你的墙代码。简要说明问题。 – 2011-06-01 03:17:25
@minitech - 从我+1。 – 2011-06-01 03:19:22
希望我的修改使问题成为一个问题。@荷兰,如果这不是你想问的问题,请纠正我,但我们不能真正阅读头脑...... – Blender 2011-06-01 03:22:39