Change hover dropdown with click in CSS? - html

I have some dropdown in css that is now made in css like this
.menu ul ul,
.menu .mega-menu,
.menu .mega-menu ol li {
opacity: 0;
visibility: hidden;
}
.menu li:hover > ul,
.menu li:hover > .mega-menu,
.menu li:hover > .mega-menu ol li {
opacity: 1;
visibility: visible;
}
Can i change it css to be on click maybe with :target?
Tried with
.menu li:focus > ul,
.menu li:focus > .mega-menu,
.menu li:focus > .mega-menu ol li {
opacity: 1;
visibility: visible;
}
Does not work
<div class="menu menu-style">
<ul class="menu brand-background">
<li class="menu-active">A</li>
<li>B</li>
<li>
C
<!-- Full Width Mega-Menu / Start -->
<div class="mega-menu full-width">
<div class="col-md-1">
<h4>Content</h4>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
</div>
</div>
<!-- Full Width Mega-Menu / End -->
</li>
<li>D</li>
</ul>
</div>

Solution using the checkbox hack
FIDDLE (Click on 'C' to show/hide the content))
.mega-menu {
opacity: 0;
visibility: hidden;
}
label {
cursor: pointer;
}
#cb {
display: none;
}
#cb:checked ~ .mega-menu {
opacity: 1;
visibility: visible;
}
<div class="menu menu-style">
<ul class="menu brand-background">
<li class="menu-active">A</li>
<li>B</li>
<li>
<input type="checkbox" id="cb" />
<label for="cb">C</label>
<!-- Full Width Mega-Menu / Start -->
<div class="mega-menu full-width">
<div class="col-md-1">
<h4>Content</h4>
<ol>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
</ol>
</div>
</div>
<!-- Full Width Mega-Menu / End -->
</li>
<li>D
</li>
</ul>
</div>
Solution using :target
1) Add an id to the element in your markup you want to target. eg give the mega-menu an id="dropdown"
2) Target the id of the element in the href of the link. eg <a href="#dropdown">
3) Use the :target selector in your css like:
#dropdown:target {
opacity: 1;
visibility: visible;
}
DEMO (Click on 'C' to show the content)
#dropdown {
opacity: 0;
visibility: hidden;
}
#dropdown:target {
opacity: 1;
visibility: visible;
}
<div class="menu menu-style">
<ul class="menu brand-background">
<li class="menu-active">A</li>
<li>B</li>
<li> C
<!-- Full Width Mega-Menu / Start -->
<div id="dropdown" class="mega-menu full-width">
<div class="col-md-1">
<h4>Content</h4>
<ol>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
</ol>
</div>
</div>
<!-- Full Width Mega-Menu / End -->
</li>
<li>D
</li>
</ul>
</div>

Related

Nested UL - CSS Responsive menu anchor problem

I have this simple HTML
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>
And this simple CSS
<style>
.sub-items {
display: none;
}
.item:hover .sub-items {
display: block;
}
</style>
This works in desktop, however, in mobile, when you touch on the second or third parent you automatically open the child url. How could I avoid this without using javascript?
Thanks in advance
According to mobile device hover features work as click or active events so better approach is .item:active .sub-items { display: block;} can we use through media query
.sub-items {
display: none;
}
#media only screen and (max-width:1240px) {
.item:hover .sub-items {
display: block;
}
}
#media only screen and (max-width:480px) {
.item:active .sub-items {
display: block;
color:red
}
}
<ul>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
<li class="item">
Parent
<ul class="sub-items">
<li>Child</li>
<li>Child</li>
</ul>
</li>
</ul>

How to change properties of another object on hover css

I am currently trying to change the properties of another object in css but am not sure if I am doing this right. Any help would be appreciated.
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover ~ ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
~ is a "general sibling selector", so it will match any element that is a sibling that comes after the element on the left side of the selector.
With your markup, you either just want to remove ~ to target any ul.drop-menu that is a child of li, or if you want the direct descendent, change it to a >. I'm assuming you want the latter, in case you nest multiple .drop-menu's in li's. I added another nested menu and changed your selector a little to demonstrate that.
ul.drop-menu {
opacity: 0.1;
}
nav > ul li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>
You have to use > instead of ~. Please check this:
ul.drop-menu {
opacity: 0.1;
}
nav > ul > li:hover > ul.drop-menu {
opacity: 1;
}
<nav>
<ul>
<li>Test
<ul class="drop-menu">
<li class="1">Test1</li>
<li class="2">Test2</li>
<li class="3">Test3</li>
<li class="4">Test4</li>
<li class="5">Test5</li>
<li class="6">Test6</li>
<li class="7">Test7</li>
</ul>
</li>
</ul>
</nav>

Why is my menu not dropping down with this CSS?

The li element with "portfolio" in the text is the element I would like to hover over to drop down. For some reason, nothing drops down when I hover over "Portfolio"...
Here is the code
#navmenu ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navmenu .hoverme:hover ul {
visibility: visible;
}
<div id="wrapper">
<div id="navmenu">
<div class="hoverme">Portfolio
<ul>
<li>Reviews
</li>
<li>Appendix
</li>
<li>Team
</li>
<li>Company
</li>
<li>Individual
</li>
<li>Cert of Att
</li>
<li>Skills Prof
</li>
<li>Csmr Visits
</li>
<li>Income
</li>
<li>Roles
</li>
</ul>
</div>
</div>
</div>
Do you know why? Any help greatly appreciated.
you need to close the li with portfolio after the child ul, otherwise your HTML markup is invalid, because you can't have ul as direct child of an ul
From Specs
Content model:
Zero or more li and script-supporting elements.
#navmenu ul ul {
position: absolute;
visibility: hidden;
top: 30px;
}
#navmenu ul li:hover ul {
visibility: visible;
}
<div id="wrapper">
<div id="navmenu">
<ul>
<li>Portfolio
<ul>
<li>Reviews
</li>
<li>Appendix
</li>
<li>Team
</li>
<li>Company
</li>
<li>Individual
</li>
<li>Cert of Att
</li>
<li>Skills Prof
</li>
<li>Csmr Visits
</li>
<li>Income
</li>
<li>Roles
</li>
</ul>
</li>
</ul>
</div>
</div>

Select the first parent with or without container

How can I select only the first parents ul (here with the class selectMe), with or without a <div> between the <nav> and them ?
I need to do it without any class in the ul.
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
.
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
How about using a different selectors for every case, and combining the both?
Case 1: Select only the first parents <ul> without <div>:
nav > ul
Note that > mean the child in the immidiate next level below.
Case 2: Select only the first parents <ul> with <div>:
nav > div > ul
Combining both cases: You can use both of these combined by adding a ,:
nav > ul, nav > div > ul
Without the class you'll need two selectors:
nav > ul,
nav > div > ul {
...
}
> here is the Child Combinator selector, which selects the direct children. This means the inner ul contained within your top-level ul will not get selected.
Example 1 (nav only)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</nav>
Example 2 (nav and div)
nav > ul,
nav > div > ul {
border: 1px dashed #f00;
}
<nav>
<div class="container">
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
<ul class="selectMe">
<li><a>Hello</a></li>
<li>
<ul>
<li><a>World</a></li>
</ul>
</li>
</ul>
</div>
</nav>
In fact I have to select all the ul in top level and not ul in ul
This is exactly what this does. In both of the above examples only the outer ul element has a border:
If both ul elements were selected, both would have the border and it would instead look like this:

Why is my <li> type not displayed?

This is my list
<ul class="list-inline row ">
<li href="#" style="color:white"> Registrate </li >
<li style="list-style-type:square; color:white" href="#">Quienes Somos </li>
<li style="list-style-type:square; color:white" href="#" style="color:white">Contacto </li >
</ul>
This is my CSS
.list-inline { padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
I get the text and the color but I don't get the square!
list-style-type:square must go in your ul tag.
<ul class="list-inline row" style="list-style-type:square;">
http://www.w3.org/wiki/CSS/Properties/list-style
Set the list-style-type on the ul element rather than the li elements.
<ul class="list-inline row " style="list-style-type: square;">
<li style="color:white"> Registrate </li >
<li style="color:white">Quienes Somos </li>
<li style="color:white">Contacto </li >
</ul>