It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 11 years ago.
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>Home</li>
<li>Parent 02
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</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>Parent 03
<ul>
<li><a name="child" href="#">Child 04</a>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
</ul>
</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class="clear"></div>
</li>
<li>Parent 04</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.
Related
I'm working on a website where the default CSS specifies:
ul li {
list-style: none;
}
This is necessary to keep the navigation bar clean (which is coded as an unordered list, basically) ...
Now, in the body of text on a particular page, I want to add a standard unordered list. So in a separate CSS sheet that exists for customizations, I added:
ul.about-page {
list-style-type: circle;
}
And then on the page where I want the unordered list, I added this to the HTML:
<ul class="about-page">
<li>Some text</li>
</ul>
I also tried some variations of the above, but in all cases it wasn't working. Instead no bullets were showing up (though the text was indented as expected).
Note: the most complicated thing I tried was to add the following to the custom stylesheet:
ul.about-page li::before {
content: "\25E6";
color: black;
display: inline-block;
width: 1em;
margin-left: -0.9em;
font-weight: bold;
font-size: 1.1em;
}
And then on the page where I want the unordered list, I entered this HTML:
<ul class=“about-page”>
<li>Some text</li>
</ul>
I was hoping that this — or some similar version of it — would work. But it also does not.
I'm sure there must be a way to do this, but after spending at least an hour searching online and trying various things, I can't seem to figure it out.
Any advice will be much appreciated!
when you use class it is have More priority but when you use Address Model Selector like ul li it has more than priority of class then you must use this code
ul li {
list-style: none;
}
ul.about-page li {
list-style-type: circle;
}
<ul>
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
<ul class="about-page">
<li>Item 11</li>
<li>Item12</li>
<li>Item13</li>
</ul>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I was testing list-style-type changes for child lists and noticed something strange happening. When you try and change the properties of a child list by using a selector like li li it will not work. If you remove the topmost selector in my below example, all styles are removed. If you inspect the element, the styles aren't being applied at all so it's not as though something is overwriting them.
li {
color: purple;
}
li li {
color: red;
list-style-type: circle;
}
li li li {
color: blue;
list-style-type: lower-roman;
}
li li li li {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
When you replace li with ul, it works as you'd expect the above to. Why does all of this happen? I've never seen behaviour like this before.
ul {
color: purple;
}
ul ul {
color: red;
list-style-type: circle;
}
ul ul ul {
color: blue;
list-style-type: lower-roman;
}
ul ul ul ul {
color: green;
list-style-type: square;
}
<ul>
<li>Parent List</li>
<ul>
<li>1st Child</li>
<ul>
<li>2nd Child</li>
<ul>
<li>3rd Child</li>
</ul>
</ul>
</ul>
</ul>
I am voting to close this as I'm an idiot and that's the extent of this. I'd hope you vote to close as well.
That's because using li li means a child li of an li. So in this case, that would apply to the second li below:
<li>
<li>foo</li>
<li>
However, in your example, the nested lists are not inside an li, but instead by themselves, so they are not the children of any li.
In your HTML, LIs are not getting nested in the LIs (they are not within each other - <li><li>...</li></li>. Hence, the styling of. li li {...} won't work at all.
The way your HTML is, it is nesting ULs. Hence, ul ul {...} styling will work.
Remember, in CSS to make li li work they should be nested within each other otherwise CSS won't work.
I would recommend just creating classes like .green .red .blue .purple and adding those classes to the <li> tags, because it has better re-usability.
I would recommend you to go trough the essentials of HTML5 again & work on your style of coding.
P.S Regarding your problem, here's another Stack that explains how to properly nest lists.
I have a multi level navigation menu on my page consisting of an unordered list. That list has the class menu, like so:
<ul class="menu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3
<ul>
<li>Subcategory 1</li>
<li>Subcategory 2</li>
</ul>
</li>
</ul>
The href attributes are set to # for illustration purposes.
My question is: What is the best Selector to use for that kind of menu regarding speed?
At the moment I am using something along these lines (again, just for illustration, there are rules missing):
.menu {
background-color: #CCC;
}
.menu li {
background-color: #FFF;
}
.menu li > ul li ul {
background-color: #333;
}
Is a class the fastest selector in that case? Or should I use something like .navigation-container ul? Do you have any recommendations?
Simpler selectors are faster than complex selectors. For example .menu is faster than .menu ul, but it's no dramatic difference.
What you have is fine. You could perhaps try to make the .menu li > ul li ul less complex, but don't expect to notice any difference, because you could perhaps shave off a millisecond or two on the rendering time.
Here is some reading about efficient CSS seletors: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
It's quicker to reference with an id, e.g. #menu, #menu li. I would also add an id to the sub ul tags too :)
which is better for use
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu ul li{
float:left;
width:150px;
height:25px;
background:#F00;
}
or
.menu{
float:left;
width:600px;
height:25px;
background:url(bg.png) repeat-x;
}
.menu ul{
float:left;
}
.menu li{
float:left;
width:150px;
height:25px;
background:#F00;
}
which tag is right menu ul li or menu li?
When you say which tag is right menu ul li or menu li?, are you talking about a div with class="menu" or are you talking about the deprecated menu tag (<menu>)?
If you are just talking about your css code, those are not tags, they are selectors. And I'd go with the most specific selector available in order to avoid accidental assignments
.menu > ul > li{
// this matches only list items directly inside a ul directly inside a .menu
}
even better would be this:
#menu > ul > li{
// now you are referencing the menu by id, so you know this is a unique assignment
}
or, if you have multiple menus:
#menubar > .menu > ul > li{
}
because otherwise you are in for surprises, you might actually have a structure like this:
(this is ugly, I know, but just to prove a point)
<div class="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3
<ul>
<li id="abc">Menu Item abc</li>
</ul>
</li>
<li>Menu Item 4
<div><div><div><ol><li><div><ul>
<li id="xyz">Menu Item xyz</li>
</ul></div></li></ol></div></div></div>
</li>
</ul>
</div>
(you probably don't want to match items abc or xyz).
It makes no difference until you have to interact with other, similar selectors in the same stylesheet — and then it depends on what those selectors are.
It depends. If you've got an ol and a ul within .menu you'll want to use the more specific .menu ul li. Otherwise, .menu li is fine. You might like to read up on CSS specifity.
Unless you're going to also have ordered lists (<ol>) inside .menu containers, the result is exactly the same. Some will probably say one is faster than the other, but that is irrelevant (and hard to prove as it may differ in every browser)
Your selectors should match your intent - if you mean for any list item, regardless of whether it's inside a UL or OL to be styled the same, then example B. If it's only UL LI's you want to style, then A.
This is a fairly simple example, but this is a useful rule of thumb. Ask yourself "If someone came and stuck an ordered list inside .menu, how would I want it to look?
It's a great way to keep your CSS to just the right level of specificity, while maintaining flexibility in the HTML structure it can apply to.
Mozilla Devcenter recommend to use .menu li. You can red more about Writing Efficient CSS and optimizing css code. Personally, I use <ul id='menu'> and then #menu { display: block; margin: 0; padding: 0 }.
I have a div structure like the bottom:
<div class="body-content">
<div class="col-middle">
</div>
</div>
What I want to do is set a style on list items within the body-content class and make sure it does not apply to anything within col-middle
I thought it would be something like...
.body-content li { }
but it applies those styles to list items within col-middle too.
The simplest and most backwards compatible option is:
div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }
You might be able to use the child selector:
div.body-content > ul li
but it's not supported in IE6.
Other than that, it depends on exactly how your markup is written and what your requirements with respect to browser support are.
If possible, change your markup to:
<div class="body-content">
<div class="col-middle">
...
</div>
<div class="col-other">
...
</div>
</div>
or something similar so you can easily distinguish between which list you want to style.
I would then ZERO out the .body-content .col-middle li { }'s
AFTER styling the .body-content li { }'s
Your only other option is to specify where the li is going to be:
.body-content .li-block li { }
The code you tried specifies how list items ONLY inside .body-content should look, even if they are inside .col-middle.
Using CSS2 there isn't any way to do what you want, appart from specifying how list items outside .col-middle should work, and then specifying how they should be styled inside .col-middle.
Using CSS3 however, you can do something like this:
:not(.col-middle) li{}
Note that this does not work in any IE browsers.
You need:
.body-content > ul li { ... }
This will only select list items that are direct descendants of a ul in .body-content.
Edit: Ooops, wrong place for the > !
Edit: Sorry, also should have mentioned - child selectors don't work in IE6.
You should use, which will put the style only for the sons li of .body-content
.body-content > ul li {}
Restyle the col-middle.
div.body-content li {
color: red;
}
div.col-middle li {
// overrides stuff
color: black;
}
Styles cascade on down from parent elements to their children.
The example below seems to work the best (I've added some extra markup to demonstrate this), but I'd recommend styling .body-content and then override those styles in .col-middle. It would be the most cross-browser compatible.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.body-content > *:not(.col-middle) li {
color: red;
}
</style>
</head>
<body>
<div class="body-content">
<div class="col-middle">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
</div>
</body>
</html>