I want to make my drop down menu stay when user clicks on element. Currently, it displays when user hover over element, like this:
div.nav ul li:hover ul {
display: list-item;
position: absolute;
}
I can change hover selector to active but that will not make the drop-down list stay upon click (releasing click will hide it).
My question is, is it possible to have the drop down stay upon click without javascript?
Yes, this is perfectly possible- you can determine visibility of a sibling list from the checked state of a hidden input:
Option 1, :checked
li,
input:checked + ul {
display: block
}
ul ul,
input {
display: none;
}
<ul>
<li>
<label for="menuTrigger">Item</label>
<input id="menuTrigger" type="checkbox" />
<ul>
<li>Sub item</li>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
Option 2, :target
Or alternatively, using the :target pseudo, although depending on your architecture, this may not place nicely with route configuration. Additionally, the list cannot be toggled once shown (except if an alternate :target is initiated).
li,
ul:target {
display: block
}
ul ul,
input {
display: none;
}
<ul>
<li>
Item
<ul id="show">
<li>Sub item</li>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
Related
i'm trying very hard to get the first link, see below. They are very hard to get without class or id. I tried all, nothing works because the selector are nested und similar.
<nav>
<ul>
<li>
First /* this one */
<ul>
<li>
First menu item
</li>
<li>
Second menu item
</li>
<li>
Another one
</li>
<li>
Last one
</li>
</ul>
</li>
<li>
Second menu item /* this one */
<ul class="m1">
<li>
Another menu item
</li>
<li>
Next one
</li>
<li>
Last one
</li>
</ul>
</li>
</ul>
</na>
if you have only one nav and one menu, you can use this one:
nav > ul > li > a { /* styles */ }
Assuming the nav element is unique on the page, you can simply select the link based on that it is within the first LI in the top-level UL:
nav > ul > li:first-child > a { color: red; }
I know that greater than (>) sign/slector will select exact child and not nested one
but in this example all <li> getting black BG
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
CSS:
#content > ul li {
background: black;
color: white;
}
as per rule black BG shouldn't be for Sub list item but here its applied to all <li> (should be just for List Item With)
http://jsfiddle.net/4j1zv25b/
Your current code selects any li within the first level ul. The child list li tags are still descendants of the first ul so get styled. You need to also use select the direct descendant of the ul:
#content > ul > li {
background: black;
color: white;
}
However, you also have the issue that all child lists are inside of that styled li. The child elements don't have a background or color set so the background is transparent and the color is inherited. You need to apply a new background and color to override those styles.
#content>ul>li {
background: black;
color: white;
}
#content li li {
background: white;
color: black;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
The behaviour you've described is correct, because your asking the direct ul child of #content, to style it's Li's with that behaviour.
Just because you've given that Li some children, does not negate its effects. Because the children are within the scope of the original targeted Li, they will be styled according to their parent.
I've attached a potential variant that you may be looking for, which should style just the first li within the sub categories.
I've also attached another example, which might better illustrate my point. Imagine a Div, with another Div inside of it, and inside the child div, there is a paragraph tag.
If you style the direct child of the first div, you would expect the paragraph tag to still have a black background, because it's parent is the targeted div. The p doesn't apply opposite styling to compensate, because why would it?
#content>ul li {
background: black;
color: white;
}
#desired>ul li ul li:first-child {
background: black;
color: white;
}
#example > div {
background: black;
color: white;
}
<div id="content">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="desired">
<ul>
<li>List Item With ul
<ul>
<li>Sub list item</li>
<li>Sub list item</li>
<li>Sub list item</li>
</ul>
</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div id="example">
<div>
<p>Still styled</p>
</div>
</div>
The greater than symbol (>) selects the direct child of the parent but grandchildren will still inherit from it.
To select the garndchild you would need ul li ul li or ul > li > ul > li
You can also use child selectors like:
:first-child
:nth-child(n)
:last-child
See more about CSS selectors here https://www.w3schools.com/cssref/css_selectors.asp
why dont you select the inner list items also
#content > ul li {background: black;
color: white;}
#content > ul li li {
background: white;
color: black;
}
I want to create css to generate the following nested list.
1. item1
subitem
subitem
2. item2
subitem
subitem
What I want is to modify the numbers (either bold or red). I searched in the internet but what I found was css for an ordered list. When I create a nested list with that css, what I obtain is extra numbers in place of the bullets. Can someone help?
You can use CSS counter only on li's that are direct children of ol with this HTML structure and then change color and font-weight.
ol {
list-style: none;
counter-reset: ol-counter;
}
ol > li:before {
counter-increment: ol-counter;
content: counter(ol-counter) ". ";
color: red;
font-weight: bold;
}
<ol>
<li>item1
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
<li>item2
<ul>
<li>sub item</li>
<li>sub item</li>
</ul>
</li>
</ol>
got a nested LI menu - what I want to be able to do is show all child ULs when any parent LI is hovered over. Ideally in just CSS? but jQuery is OK if not poss in CSS.
Menu code is:
<ul>
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
So for example - when Item 1 is hovered over - the submenu ULs for Item 1 AND Item 2 should show... easy? I cant seem to work it out.... :(
Under your current requirements, that the hover of the <li> should show the <ul> child elements of all sibling <li> elements this isn't possible without JavaScript (with or without a library, as CSS lacks the ability to select elements appearing previously in the DOM, including both ancestor-elements and previous siblings); however if you're willing to allow for the hover to take place on the parent <ul> element this becomes possible with simple CSS:
ul > li {
display: list-item;
}
li > ul {
display: none;
}
ul:hover > li > ul {
display: block;
}
JS Fiddle demo.
In the above the use of the child combinator (>) means this will show only the first level of <ul> elements, if that last rule is amended then all <ul> children can be shown:
ul:hover > li ul {
display: block;
}
JS Fiddle demo.
Given the following HTML, what CSS rule would select and ONLY select the line that says TWO?
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selector doesn't work:
.active:last-of-type {...}
Also, I must clarify that if there is no sub-menu or rather the link in the sub-menu is NOT active, then the parent menu must be selected by the same rule. In other words, given the following HTML, the same rule would highlight the line that says ONE:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one</a>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No single selector statement will match both of your use cases (not until parent selectors are supported, anyway). You would have to include, for example, an additional class in one of those use cases in order to fulfill your requirements without your selector matching all .active elements.
Assuming the following use cases:
Active sub-menu element
<ul class="menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li class="active"><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
No active sub-menu element
<ul class="menu no-active-sub-menu">
<li class="active"><a>one</a></li>
<li>
<ul class="sub-menu">
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
</li>
</ul>
The following selectors would work:
.menu .sub-menu > .active,
.menu.no-active-sub-menu > .active {
...
}
ul > ul > li:first-child
but you should nest the child UL inside the li in which case:
ul > li > ul > li:first-child
You can use this
ul ul .active {...}
Going from the code provided
Just use :last-child
ul .active:last-child {
color: green;
}
As was suggested by one of the contributors, the parent required another class to set it apart from the child(ren) menu items for this to work. I am posting my solution in case others are faced with something similar.
This is the HTML when the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active">
<a>one (parent, active page)</a>
<ul class="sub-menu">
<li><a>two (child)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
This is the HTML when a child menu item of the parent is the active page:
<ul class="menu">
<li><a>void</a></li>
<li class="active page-parent">
<a>one (parent)</a>
<ul class="sub-menu">
<li class="active"><a>two (child, active page)</a></li>
<li><a>three (child)</a></li>
</ul>
</li>
</ul>
These are the rules I used:
/* Highlights the parent and any child
menu item under the parent when the
parent is the active page. */
ul.menu li.active a {
color: red;
}
/* Keeps the children menu items normal
when the parent is the active page.
Also keeps the parent normal when a
child menu item is the active page. */
ul.menu li.active ul.sub-menu li a,
ul.menu li.active.page-parent a {
color: black;
}
/* Highlights the child menu item that
is active */
ul.menu li.active.page-parent ul.sub-menu li.active a {
color: red;
}
It definitely is straightforward once you identify the parent state with a unique rule when one of its children menu items is active. Obviously, this would be easier if the child items didn't inherit the "active" state from the parent, but the menu system I am using behaves as described here. Thanks to everyone for their contributions.
Note: I have not tested this with a menu containing more than 1 sub-menu level deep.