I have a navbar that contains a menu nested 3 times. So I have a div with id="navbar", which contains an ul, that has a li item with id="menu", that contains another ul, that contains more li items. Now I want to target every ul seperately, to add some JS code to it, make the first layer display in a row and so forth. So far I've only managed to target the first level, and the third one, but haven't been able to change properties of the second one. Somehow #navbar ul li goes to the first one, but #navbar ul li ul li targets the third. What am I doing wrong?
HTML:
<div id="navbar">
<ul>
<li>IJS</li>
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
<li>ENG</li>
</ul>
</div>
CSS:
#navbar {
background-color: #913D88;
color: #fff;
font-size: 1.5em;
}
#navbar ul li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
#navbar ul li a:link, #navbar ul li a:visited {
color: #fff;
text-decoration: none;
}
#navbar ul li ul li {
display: none;
}
Small mistake. Your second level ul are outside of li elements instead of inside.
The problem is there in the following code.
<li class="ion-navicon-round" id="menu"></li>
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja </li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
Should be like this.
<li class="ion-navicon-round" id="menu">
<ul>
<li>knjižnica</li>
<li>zaloga
<ul>
<li>novi izvodi tiskanih revij</li>
<li>elektronske revije</li>
<li>katalog</li>
<li>baze podatkov</li>
</ul>
</li>
<li>storitve
<ul>
<li>medknjižnična izposoja</li>
<li>fotokopirnica</li>
</ul>
</li>
</ul>
</li>
DEMO
you have an error in your syntax.
the second "ul" is not in an li, because you close the li before it.
so try
#navbar ul ul li {
background-color: #ffff00;
}
Related
I need to add css styles to parent list.
I have one parent ul and children. I want to apply color to fruits, vegetables and flowers but not Apple, Banana, Orange.
I want to do this using a CSS selector.
ul:root>li {
color: red;
}
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>
You could simply add a class to the parent ul and then use the direct descendant selector to target only those li items.
This is definitely going to change the colors for Apple or Orange but you can then reset the color on the sub ul items.
Here's your updated demo.
.parent-list > li {
color: red;
}
.parent-list > li ul {
color: initial;
}
<ul class="parent-list">
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>
Use like this...
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>
<style>
ul li{
color: red;
}
ul li li{
color: black;
}
</style>
ul > li { /* select list items that are children of a ul */
color: red;
}
ul ul li { /* select list items that are descendants of a ul, itself... */
color: black; /* ...a descendant of another ul */
}
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
</ul>
<style>
ul li {
color: red;
}
ul ul li {
color: black;
}
</ul>
</style>
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</li>
<li>Vegetables</li>
<li>Flowers</li>
How can I select the elements li, children of the element nav > ul?
As you can see in the following snippet, I can select nav > ul and remove the listing style. However, I can't manage to change the color of only Link1, Link2 and Link3.
nav > ul {
list-style: none;
}
nav > ul li {
color: red;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
The answer nav > ul > li does not work, according to this JSFiddle. To people down voting the question, could you at least provide a reason?
There are four different combinators in CSS3, in this situation we used two of them:
Descendant Selector (selectors separated by 'space')
Child Selector (selectors separated by '>')
So "nav > ul > li" (select the four LI presents on the first UL),
and then applies the color red, consequently all text color becomes red.
As the second UL is a child of fourth LI it gets red too.
To fix that we need create a rule for all the subsequent UL's.
nav > ul {
list-style: none;
}
nav > ul > li { /* only direct children */
color: red;
}
nav > ul ul { color: black; } // resets the color of the nested ULs
Give them class names like:
<li class = "red_font">
then change your CSS to:
.red_font{
color:red;
}
This code ran, I think the li inside that parent li element inherit the color thus the color goes to all li elements.
I'd suggest you specify with another selector like id or class to make it easier to specify the elements you want to manipulate.
nav > ul {
list-style: none;
}
ul > li {
color: red;
}
li > ul li{
color: black;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
there are many ways to achieve what you want, here is another way which is not yet presented in the other answers:
add a class "skip" to the li which contains the 2nd level of links, and skip it in your css using the :not selector:
nav > ul {
list-style: none;
}
nav > ul > li:not(.skip) {
color: red;
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li class="skip">
<ul >
<li>
Link3-1
</li>
<li>
Link3-1
</li>
</ul>
</li>
</ul>
</nav>
It happens because you're selecting every children. See the solution below:
nav > ul {
list-style: none; /* This will disable listing styles */
}
nav > ul > li {
color: red; /* this will select Link1, Link2 and Link3 (first level) */
}
nav > ul > li > ul {
color: #000; /* this will select Link3-1 and Link3-2 (second level) */
}
<nav>
<ul>
<li>
Link1
</li>
<li>
Link2
</li>
<li>
Link3
</li>
<li>
<ul>
<li>
Link3-1
</li>
<li>
Link3-2
</li>
</ul>
</li>
</ul>
</nav>
got an html list working as a dropdown menu with CSS when you hover through a < li > element like "Products" in my example. But what I want is the same effect when hover through < h3 > like "Contact" from my example. Is it possible?
Here's the html:
<h3>Contact</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
And the CSS code:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
Thank you very much in advance.
On hover you can only control the CSS of the element you hover over, or the CSS of elements within the element you hover over (one of its children).
So you can not make the ul change styles when you hover over the h3 because they 1) are not the same object and 2) do not have a parent-child relationship (they are siblings).
To show the menu when hovering over the h3, you can wrap both of them inside another object (div) and use this for the hover event. To distinguish between the two hovers you can add classnames to both the uls.
See this JSfiddle, or the code below:
<div class="container">
<h3>Contact</h3>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="submenu">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
.container ul{
display: none;
}
.container:hover ul.menu{
display: block;
}
ul li ul.submenu {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
In short - you should nest ul inside the h3
<h3>
Contact
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</h3>
And in your css:
ul li ul {
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
h3 > ul {
display: none;
}
h3:hover > ul {
display: block;
}
Here's the demo: https://jsfiddle.net/mscehjLf/1/
Hi I have a basic menu for which I would like to add a submenu, that appears only when a certain menu link is hovered. Everything I have tried does not hide the submenu when a link is not hovered. Here is my code:
CSS
.navmenu{
float:right;
font-size: 13px;
font-weight:400;
text-transform: uppercase;
}
.navmenu li{
position: relative;
display: inline-block;
float: left;
}
.navmenu li a{
text-decoration:none;
color:#eee;
padding:15px 37px 19px 37px;
}
.navmenu li a:hover{
background:#36332e;
}
.active a{
background:#36332e;
}
HTML
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>Sub Link 1</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
You need to initially hide the menu:
.navmenu li ul { display: none; }
and then display it when you hover over the nav item:
.navmenu li:hover ul { display: none; }
You should also be careful about defining styles that target .navmenu li or .navmenu li a because those will also target your submenu. You should instead use child selectors, giving you more control over the non-submenu links, so your selectors will look like:
.navmenu > li
.navmenu > li > a
I've encorperated some of those changes into this JSFiddle to get you started:
http://jsfiddle.net/Wexcode/B5P26/
Edit:
This is actually going to lose it's hover state when you hover over the submenu links:
.navmenu > li > a:hover {
background:#36332e;
}
Instead, you should do this:
.navmenu ul { position: absolute; }
.navmenu > li:hover { background: #e6332e; }
.navmenu > li > a { display: block; }
Since the <ul> is nested inside the <li> element, you won't lose the hover state when you hover over the submenu links. I updated the fiddle to reflect these changes.
<ul class="navmenu">
<li class="active">Home</li>
<li>About Us
<ul>
<li>
Sub Link 1
<ul>
</li> <a href=# >hi hi hi</a>
<ul>
<li>hello hello hello</li>
<li>hello hello hello</li>
<li>hello hello hello</li>
</ul>
</li>
</li><a href=# >hi hi hi</a> </li>
</li> <a href=# >hi hi hi</a> </li>
</ul>
</li>
<li>SubLink 2</li>
</ul>
</li>
<li>Testimonials</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
I have a class specified for a list:
.nav ul li.current {
background: #fff;
}
The problem is, I only want to style the parent li element, not any children.
<div class="nav">
<ul>
<li>Something</li>
<li class="current">Something else</li> <!-- apply class here -->
<li>
<ul>
<li>Child something</li>
<li class="current">Child something else</li> <!-- ...but not here -->
</ul>
</li>
</ul>
</div>
The CSS pasted above is changing the background for both li elements with the class "current". How do I correct this?
.nav > ul > li.current { ... }
.nav > ul > li.current {
...
}