I have a dropdown menu (full-width) on my dropdown, I have a nested list and I want each column to have equal height and width. I tried to add a container inside each column and put display: table-cell; but it seemed my code isn't working at all. can ya'll help me with this?
<div class="column">
<div class="col-container">
<ul id="sub-list">
<li class="sub-list-item">
<a class="sub-list-title">창업 프로세스</a>
</li>
<li class="nested-child">
<ul class="sub-sub-list">
<li class="item"><a class="sub-sub-title">경진대회정보</a></li>
<li class="item"><a class="sub-sub-title">명예의 전당</a></li>
</ul>
</li>
<li class="sub-list-item">
<a class="sub-list-title">행사 네트워크</a>
</li>
</ul>
</div>
</div>
snippet from style.scss
.column{
float: left;
margin: 0;
display: table;
.col-container{
display: table-cell;
background: yellow;
padding: 21px;
}
}
I'll provide a photo of what the output should be like.
This is made using nested UL. how do we achieve this one?
You can change the flex-basis value to adjust the number of columns you want to dislplay, hope you have got the solution looking for.
Refer flexbox:
ul,
li {
margin: 0;
padding: 0;
}
.list-item-main {
display: flex;
flex-wrap: wrap;
}
.list-item-main>.list-item {
list-style: none;
flex-basis: 33%;
box-sizing: border-box;
padding: 15px;
}
.list-item-main>.list-item .nested-ul>li {
list-style: none;
box-sizing: border-box;
padding: 0 15px;
}
.list-item-main .list-item-head {
background: gold;
}
<div class="list-container">
<ul class="list-item-main">
<li class="list-item">
<a>Single List item</a>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
<li class="list-item">nested list 1 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
<li class="list-item">nested list 2 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
<li class="list-item">nested list 3 item</li>
</ul>
</li>
<li class="list-item">
<ul class="nested-ul">
<li class="list-item-head">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
<li class="list-item">nested list 4 item</li>
</ul>
</li>
</ul>
</div>
Related
I am having dropdowns in a menu that has horizontal scrolling on mobile resolution.
As you can see in the example the desktop version is able to display the dropdowns when the menu is hovered, however, when using the mobile version that uses overflow-y: hidden the dropdown is obscured.
I have attempted to change the overflow-y to all available options, I would have thought setting it to visible would allow the dropdown to be seen however, this is not the case.
I'm open to anything at this point, I'm about to use position fixed and set it with javascript but I would prefer not to if there is a better solution in css.
I need to leave the horizontal scrolling of the top level menu items.
Thanks for any help.
body {
background: #eee;
font-family: sans-serif;
}
.main.mobile {
max-width: 250px;
}
.main {
max-width: 700px;
margin: 0 auto;
background: white;
}
.mobile .nav {
overflow-x: scroll;
overflow-y: hidden;
}
.list {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.list__item {
padding: 1em;
white-space: nowrap;
position: relative;
transition: .2s all;
}
.list__item:hover {
background: #dc205c;
}
.list__item:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown {
visibility: hidden;
opacity: 0;
transition: .4s all;
position: absolute;
list-style-type: none;
top: 100%;
padding: 0;
left: 0;
background: white;
}
.dropdown__item {
padding: 1em;
transition: .2s all;
}
.dropdown__item:hover {
background: #dc205c;
}
<main class="main mobile">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
<main class="main">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
RE: above regarding duplicate - my question asks if there was a way to select ALL elements inside of a child where one class exists in pure CSS whereas that linked question is just asking if there is an opposite of the + selector which is not what I was asking/looking for. This should be untagged as duplicate.
Main Question:
I want to select all elements inside a parent if one of the siblings has a specific class. How do I do this? I tried:
https://www.w3schools.com/cssref/sel_gen_sibling.asp
The element1~element2 selector matches occurrences of element2 that
are preceded by element1.
But it's not what I want.
CSS sibling selectors (select all siblings)
My question is not a duplicate as the class is in the first element in above question comes first which makes it work.
See below:
.red ~ .item {
background-color: red;
}
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>
How do you select all siblings if one of them has a class in pure CSS? Or do I need to use JS?
Use jQuery to get the siblings and then apply the red class to them.
$( "li.item.red" ).siblings().addClass("red");
.red {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
<ul>
For this particular case and if you want to apply background to all your elements, you can consider a pseudo element that will cover all of them as your background layer:
ul {
position: relative;
z-index: 0;
}
.red:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 40px;
right: 0;
bottom: 0;
background-color: red;
}
<ul>
<li class="item red">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item">list item</li>
</ul>
<ul>
<li class="item">list item</li>
<li class="item">list item</li>
<li class="item red">list item</li>
<li class="item">list item</li>
</ul>
I have an html structure roughly like this:
<ul class="groupmenu-drop">
<li class="level1">
BMW
<ul class="level1 groupmenu-drop">
<li class="level2"> i3 </li>
<li class="level2"> i5 </li>
<li class="level2"> i7 </li>
</ul>
</li>
<li class="level1">
Mercedez Benz
<ul class="level1 groupmenu-drop">
<li class="level2"> a-class </li>
<li class="level2"> e-class </li>
<li class="level2"> c-class </li>
<li class="level2"> s-class </li>
</ul>
</li>
</ul>
my current css:
ul.groupmenu-drop{
display: block;
text-align: left;
padding: 0;
margin: 0;
position: absolute;
background: #fff;
top: 100%;
z-index: 99;
list-style: none none;
box-sizing: border-box;
}
li{
list-style: none
padding: 8px 15px;
min-width: 230px;
position: relative;
margin: 0px auto;
box-sizing: border-box;
}
.groupmenu-drop > li {
width: 100%;
}
I want to make the first ul to have maximum height so when the level1 li and its child overlapping the ul height it will make the ul stretch its width and the level1 li will fill it, here's what i want it to look like:
Something like this:
.groupmenu-drop {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.level1 {
flex-basis: 50%;
}
.groupmenu-drop .groupmenu-drop {
display: block;
}
<ul class="groupmenu-drop">
<li class="level1">
BMW
<ul class="level1 groupmenu-drop">
<li class="level2"> i3 </li>
<li class="level2"> i5 </li>
<li class="level2"> i7 </li>
</ul>
</li>
<li class="level1">
Mercedez Benz
<ul class="level1 groupmenu-drop">
<li class="level2"> a-class </li>
<li class="level2"> e-class </li>
<li class="level2"> c-class </li>
<li class="level2"> s-class </li>
</ul>
</li>
<li class="level1">
Mercedez Benz
<ul class="level1 groupmenu-drop">
<li class="level2"> a-class </li>
<li class="level2"> e-class </li>
<li class="level2"> c-class </li>
<li class="level2"> s-class </li>
</ul>
</li>
</ul>
Try this, Using flex-flow: column wrap; will display li as columns, will and wrap if necessary or there is space available vertically.
.groupmenu-drop:not(.level1) {
max-height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
<ul class="groupmenu-drop">
<li class="level1">
BMW
<ul class="level1 groupmenu-drop">
<li class="level2"> i3 </li>
<li class="level2"> i5 </li>
<li class="level2"> i7 </li>
</ul>
</li>
<li class="level1">
Mercedez Benz
<ul class="level1 groupmenu-drop">
<li class="level2"> a-class </li>
<li class="level2"> e-class </li>
<li class="level2"> c-class </li>
<li class="level2"> s-class </li>
</ul>
</li>
<li class="level1">
Audi
<ul class="level1 groupmenu-drop">
<li class="level2"> a-class </li>
<li class="level2"> e-class </li>
<li class="level2"> c-class </li>
<li class="level2"> s-class </li>
</ul>
</li>
</ul>
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.
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>