I have navigation menus that look something like this:
<ul id="nav1">
<li>Link 1</li>
<li>
Link 2
<ul id="subnav1">
<li>Sublink 1</li>
<li>Sublink 2</li>
<li>Sublink 3</li>
</ul>
</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
I have a bunch of CSS styling that looks like this:
ul#nav1{ … styles … }
ul#nav1 > li{ … styles … }
But I really don't want the styling to cascade down to the "subnav1" menu, yet it is for some reason. I thought the "greater than" sign in my CSS would prevent that. How can I make the "subnav1" menu have its own styling, without anything cascading down from "nav1"?
ACTUAL CODE:
<ul id="nav2" class="clearfix">
<li>
<div class="nav2hl"></div><a class="drop" href="products.htm">Products</a>
<div class="menu1bg" classclearfix">
<ul class="menu1">
<li>RETAIL</li>
<li>Hot Dogs</li>
<li>Ring Bologna</li>
<li>Hams</li>
<li>Make it Easy Hams</li>
<li>Sausage/Brats</li>
<li>Deli Meats</li>
<li>Other</li>
</ul>
<ul class="menu1">
<li>FOOD SERVICE</li>
<li>Hot Dogs</li>
<li>Ring Bologna</li>
<li>Hams</li>
<li>Sausage/Brats</li>
<li>Deli Meats</li>
<li>Roller Bites</li>
<li>Pizza Toppings</li>
<li>Other</li>
</ul>
</div>
</li>
<li></li>
<li><div class="nav2hl"></div><a class="drop" href="recipes.htm">Recipes</a></li>
<li></li>
<li><div class="nav2hl"></div>Family<br />Fun</li>
<li></li>
<li><div class="nav2hl"></div>Special<br />Offers</li>
<li></li>
<li><div class="nav2hl"></div>Note &<br />Newsworthy</li>
<li></li>
<li><div class="nav2hl"></div>Retailer<br />Locator</li>
<li></li>
<li><div class="nav2hl"></div>Contact<br />Us</li>
</ul>
CSS:
div#nav2bg{background:#e8dcab url('../img/bg_nav2.jpg') repeat-y top center;}
ul#nav2{float:right;margin:0;padding:0;list-style-type:none;}
ul#nav2 > li{display:inline-block;position:relative;float:left;margin:0;padding:0;}
ul#nav2 > li:nth-child(even){width:1px;height:93px;background:transparent url('../img/bg_nav2_divider.png') no-repeat top left;}
ul#nav2 > li a,ul#nav2 > li a:visited{display:inline-block;position:relative;width:107px;height:67px;margin:0;padding:26px 0 0 0;color:#856e46;text-align:center;text-transform:uppercase;}
ul#nav2 > li a.drop{height:59px;padding-top:34px;}
ul#nav2 > li a:hover{color:#f4eed6;}
ul#nav2 > li div.nav2hl{display:none;position:absolute;top:0;left:0;width:107px;height:93px;background-color:#af9764;}
div.menu1bg{position:absolute;top:93px;left:50%;z-index:999;width:488px;height:297px;margin-left:-244px;background:rgba(237,230,206,0.95);}
ul.menu1{float:left;width:244px;height:297px;margin:0;padding:0;list-style-type:none;}
You have
ul#nav2 > li a, ul#nav2 > li a:visited { ... }
This will target all the anchors under ul#nav2 > li, since the anchor in your second level nav qualifies so it will take styles from it
Use
ul#nav2 > li > a, ul#nav2 > li > a:visited { ... }
to target the more specific anchor, you might need to apply this at multiple places
Basically you have to override them.
A similar question was answered here:
How do I prevent CSS inheritance?
The > is exactly what you should be using.
I made a JSFiddle for some examples of technicalities of using >:
For example, #nav1 changes the list-style and only the #nav1 > li's are affected (#subnav1 is still the default circle):
#nav1 > li{list-style-type:square;}
HOWEVER, should you do something like #nav2 > li{background-color: yellow;}, the background-color of #subnav2 with still be yellow because it is nested WITHIN #nav > li
Related
how can i summarize the following css code? The current css code will display all li element as none.
ul.cmpro-accordion > li:not(.cid-2),
ul.cmpro-accordion > li:not(.cid-61){
display: none;
}
It's about specificity.
<ul class="cmpro-accordion">
<li>li text 1</li>
<li class="cid-2">li text 2</li>
<li class="cid-61">li text 3</li>
<li>li text 4</li>
<li>li text 5</li>
</ul>
Css:
ul.cmpro-accordion > li.cid-2,
ul.cmpro-accordion > li.cid-61 {
display: block
}
ul > li:not(.cid-2),
ul > li:not(.cid-61) {
display: none;
}
Example
I was wondering if it's possible to style nested unordered lists with CSS only, without using any scripts. The problem is that CSS needs to work for any depth of the list tree.
For example, I have a list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="holder">
<ul>
<li>Item 4</li>
<li>Item 5</li>
<li class="holder">
<ul>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li class="holder">
<ul>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
And this is my CSS:
li{
background: gray;
border: 1px solid;
display: block;
margin: 2px;
}
.holder{
background: none;
border: none;
}
/*replace these styles*/
li > ul > li{
background: white;
}
li > ul > li > ul > li{
background: gray;
}
li > ul > li > ul > li > ul > li{
background: white;
}
If node's parent has background A, node should have background B. If node's parent has background B, node should have background A.
Please check : http://jsfiddle.net/bCU34/6/
CSS selectors allow you to select all named elements of a parent node by separating the named element from the parent element with a space. To select all unordered list elements, for example, you would do like below. Notice all ul elements at any depth inherit the style no bullets/margin/padding. In order do style nth layer for an element type, you need to use the parent selector >. See below. I used font color but you could set background images the same way. Note there is no decendant level selector at this time that I know of. This was addressed on another post CSS select nested elements up to N levels deep.
.container ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.container > ul > li {
color: green;
}
.container > ul > li > ul > li {
color: red;
}
.container > ul > li > ul > li > ul > li {
color: blue;
}
<section class="container">
<h1>CSS Nested List Styling</h1>
<ul>
<li>
<h3>Section 1</h3>
<ul>
<li>
<h4>Foo</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
<li>
<h4>Foo Bar</h4>
<ul>
<li>
<h5>Bar</h5>
</li>
<li>
<h5>Bar</h5>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Section 2</h3>
<ul>
<li>
<h4>Hello</h4>
<ul>
<li>
<h5>World</h5>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
There isn’t any specific way of doing this currently with Selectors level 3, and the current draft of Selectors level 4 doesn’t seem to add anything either. I had a dig through the www-style mailing list and came up with this post by Lachlan Hunt from April 2005 that suggests that an :nth-descendant() style selector had been considered but never specified.
There´s my code below, now I´m trying to know if there is some CSS property to inform users that there is a sub menu in my <li>test</li>. Is it possible?
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact</li>
<li>test
<ul>
<li>item a</li>
<li>item b</li>
<li>item c</li>
<li>item d</li>
</ul>
</li>
</ul>
</nav>
</section>
CSS:
#menu {width:960px; height:auto; margin:0 auto 0 auto;}
#menu ul {list-style-type:none;}
#menu ul li {float:left; height:46px;line-height:46px; font-weight:300;}
#menu ul li a {text-decoration:none;color:#ccc; display:block; margin-right:5px; height:46px; line-height:46px; padding:0 5px 0 5px;font-size:20px; }
Just for the record it is possible without JS:
What I did is to specify a styling for child ul-elements nested within an li.
The sub-ul is not visibility:hidden as in the previous example, the child elements are.
So here you go:
http://codepen.io/anon/pen/ufGdm
#Paulie_D I used your code as basic and just changed some parts.
There is no CSS property that detect a child element.
However it's simple enough to do with JQuery...in fact there are an number of ways with JQ
Here's one.
JQuery
(function($) {
$("nav > ul").addClass("top-level");
$(".top-level li:has(ul)").addClass("parent");
})(jQuery)
Codepen Demo
I am looking for some really simple vertical multilevel menu, but I did not find anything. My idea of menu is for example like this:
<ul id="menu">
<li>Item 1</li>
<li class="parent">Item 2
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 6</li>
And I would like to at first hide all sub categories. And if I click on the some category, the page will load and one the category with class="parent" will show its category. My question is, how can I reach this only with css?
This is basically how a hover menu works; hide the <ul> by default and show it when being hovered.
jsFiddle
#menu li > ul {
display:none;
}
#menu li:hover > ul {
display:block;
}
If you want .parent to show as well just put it in with the hover rule:
jsFiddle
#menu li:hover > ul,
#menu li.parent > ul{
display:block;
}
to hide the sub categories you need to add these to css file
#menu li > ul { display:none;}
#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}
I am using Cufon (http://cufon.shoqolate.com/generate/) to replace some text in a menu.
Problem is that I only need to style the first <li> of the first <ul>.
I have tried using:
Cufon.replace('#menu ul li > a', { fontFamily: 'Christopherhand', hover: { color: '#99c635'}});
With the > seperator, but it does not work. It still replaces the #menu ul li ul li a
This is my markup:
<div id="menu">
<ul>
<li class="current">
About JW
<ul>
<li>Subpage 1</li>
<li>Subpage 2</li>
<li>Subpage 3</li>
<li>Subpage 4</li>
</ul>
</li>
<li>Our Products</li>
<li>Best Recipes</li>
<li>Health & Diet</li>
<li>Our Ads</li>
</ul>
</div>
Can anyone see the problem? It should work without adding a class to sub <ul>. :-)
Thank you.
You can use:
Cufon.replace('#menu > ul:first > li:first > a');
but you have to include jQuery before cufon import in order to use such selector.
https://github.com/sorccu/cufon/wiki/usage