Nested UL - CSS Responsive menu anchor problem - html

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>

Related

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>

Vertical <ul> in horizontal <li>

I want to separate the screen into three columns using a ul tag, and I want to have a normal (vertical) list inside the first column. I tried this but it does not work:
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle"></li>
<li class="content_right"></li>
</ul>

Try the following code. I hope it helps.
#content_seperator,
.content_left,
.content_middle,
.content_right {
display: flex;
}
.content_left,
.content_middle,
.content_right {
flex: 1 1 0
}
<ul id="content_seperator">
<li class="content_left">
<ul id="vertical-nav">
<li>Menu1</li>
<li> Menu2 </li>
<li> Menu3 </li>
<li> Menu4 </li>
<li> Menu5 </li>
</ul>
</li>
<li class="content_middle">Middle</li>
<li class="content_right">Right</li>
</ul>

you may use,
#content_seperator{
display: block;
}
#content_seperator li{
display: inline-block;
vertical-align: top;
}
#content_seperator li ul li{
display: block;
}
you can give width for 'li' by using class.

div inside li full width

I'm trying to put divs inside li. If the user klick on one li-tab, the div appears. The list elements are in horizontal position, and the div content should be placed under the whole list. At the moment, if the div appears, the standard content appears over the div.
.filter-list {
position: relative;
}
.filter {
display: inline-block;
padding-right: 40px;
}
.subnav {
position: absolute;
}
<ul class="filter-list">
<li class="filter">Name
<div id="subnav">onetwothree
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>

try this
<ul class="filter-list">
<li class="filter">Name
<div class=row>
<div id="subnav">onetwothree</div>
</div>
</li>
<li class="filter">Name two</li>
<li class="filter">Name three</li>
</ul>

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: