Why does CSS not allow me to nest selector blocks? [closed]
I'm just trying to create another dropdown menu effect within a dropdown menu.
Observe:
<!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;
}
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.
Why does CSS not allow me to nest selector blocks?
Instead of doing:
#nav li ul li a:hover{
#nav li ul li ul li a{
visibility:visible;
}
}
It should be:
#nav li ul li:hover ul li a
{
visibility:visible;
}
You can't nest statements. It's just not the right use for CSS.
From Wikipedia:
Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
CSS isn't a scripting language like JavaScript, so it doesn't behave like one. It just tells the browser what to display and how to display it. That's just the main purpose of it.
There are ways, though, to do what you want in pure CSS. While you can't nest rule declarations, you can still apply them in nifty ways:
element subelement {
display: none;
}
element:hover subelement {
display: block;
}
That's the basic logic behind a dropdown menu in pure CSS. Think of :hover as a thing which adds a class to the element being hovered and work from there.
If you want a full tutorial, here's a promising one: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Other people have shown you how to fix the problem, but you shouldn't really be doing it that way anyways; although it is a nice and clean way to create menus, it crosses the boundaries in the content-presentation-behaviour rule. Although it may not matter much, the code that drops down menus belongs in JavaScript.
加载中,请稍侯......
精彩评论