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>
Related
I have been struggling with HTML and CSS and i am trying to get the list in my drop down to display side by side, inline and center? Once i have figured out the correct method i will use the div with the class names "left", "middle" and "right" on all the drop down menus.
here is a pic of what i have got to:
So like you can see in the bath dropdown in the image above i have them in 3 columns they are not inline and there is a gap either side i cannot seem to remove? eventually i will have an extra column on each dropdown which will have a image in it.
Any help would be great and as with all my questions so far a brief description of why would be awesome just so i can get a better understanding as i am learning as i go.
here is a fiddle
https://jsfiddle.net/qesmow58/5/
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu>ul>li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu>ul>li>div {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu>ul>li:hover>div {
display: block;
}
.left,
.middle,
.right {
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths<span class="arrow">▼</span>
<div>
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>Toilets<span class="arrow">▼</span>
<div>
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Basins<span class="arrow">▼</span>
<div>
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>Shower Enclosures<span class="arrow">▼</span>
<div>
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures
<h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>Furniture<span class="arrow">▼</span>
<div>
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>Showers<span class="arrow">▼</span>
<div>
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>Taps<span class="arrow">▼</span>
<div>
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>Accessories<span class="arrow">▼</span>
<div>
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Add this to your css
.left, .middle, .right {
float: left;
width: 33.3%;
box-sizing: border-box;
}
https://jsfiddle.net/qesmow58/8/
Give the div a class which you have used to wrap drop-down items so that you can be specific for that particular div. Here i have given sub-menu-container class to it
Add vertical-align: top to .left, .middle, .right. this is
because you have set display: inline-block to them.
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu > ul > li > a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu > ul > li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu > ul > li > div.sub-menu-container {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu > ul > li:hover > div {
display: block;
}
.left, .middle, .right {
display: inline-block;
vertical-align: top;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>
Baths<span class="arrow">▼</span>
<div class="sub-menu-container">
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li>Standard</li>
<li>L-Shaped</li>
<li>B-Shaped</li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li>Bath Screens</li>
<li>Bath Panels</li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li>All</li>
</ul>
</div>
</div>
</li>
<li>
Toilets<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li>Back to Wall</li>
<li>Close Coupled</li>
<li>Comfort Height</li>
<li>Fully Back to Wall</li>
<li>Low Level</li>
<li>Toilet and Basin Units</li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li>Concealed Cisterns</li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Basins<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li>Basin and Pedestal</li>
<li>Cloakroom</li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li>All Basins</li>
</ul>
</div>
</li>
<li>
Shower Enclosures<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures</h3>
</li>
<li>Amelia Bifold Door</li>
<li>Amelia Enclosure Side Panels</li>
<li>Amelia Pivot Door</li>
<li>Amelia Quadrant Enclosure</li>
<li>Amelia Sliding Door</li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li>Sienna Quadrant</li>
<li>Sienna Bifold Door</li>
<li>Sienna Pivot Door</li>
<li>Sienna Sliding Door</li>
<li>Sienna Wet Room Screen</li>
<li>Sienna Enclosure Side Panels</li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li>Shower Trays</li>
<li>Riser Kits</li>
</ul>
</div>
</li>
<li>
Furniture<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li>Bella Collection</li>
<li>Caprice Collection</li>
<li>Gino Collection</li>
<li>Shine Collection</li>
<li>Sienna Collection</li>
<li>Valentino Collection</li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li>Vanity Unit and Basin</li>
<li>Wall Vanity Unit and Basin</li>
<li>Corner Vanity Unit and Basin</li>
<li>Back to Wall Units</li>
<li>Cupboard Units</li>
<li>Mini Units</li>
</ul>
</div>
</li>
<li>
Showers<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li>Round Head</li>
<li>Square Head</li>
</ul>
</div>
</li>
<li>
Taps<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li>Mono Mixer</li>
<li>Bath Shower Mixer</li>
<li>Mini Mono Mixer</li>
<li>Bath Filler</li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li>All</li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li>All</li>
</ul>
</div>
</li>
<li>
Accessories<span class="arrow">▼</span>
<div class="sub-menu-container">
<ul class="accessoriesdropdown1">
<li>Wastes</li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
Working fiddle here
I'm trying to create a wall pattern using just CSS. The wall should grow from bottom up just as a wall in real life would. That much I have managed thanks to flex. I am now trying to arrange the div's in an un-even pattern to make it more realistic. Like this (I know there are JavaScript solutions for this, but is there anyway I can achieve this using just CSS?
body {
display: flex;
min-height: 100%;
background: #f8f8f8;
}
html {
min-height: 100%;
}
.flex-container {
padding: 0;
width: 100%;
height: auto;
margin: 0;
list-style: none;
display: flex;
align-items: flex-start;
/*display: grid;
grid-gap:1rem;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-item {
background: blue;
padding: 5px;
width: 100px;
height: 30px;
margin: 10px;
line-height: 30px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
<ul class="flex-container wrap-reverse">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
<li class="flex-item">25</li>
<li class="flex-item">26</li>
<li class="flex-item">27</li>
<li class="flex-item">28</li>
<li class="flex-item">29</li>
<li class="flex-item">30</li>
<li class="flex-item">31</li>
<li class="flex-item">32</li>
<li class="flex-item">33</li>
<li class="flex-item">34</li>
<li class="flex-item">35</li>
<li class="flex-item">36</li>
<li class="flex-item">37</li>
<li class="flex-item">38</li>
<li class="flex-item">39</li>
<li class="flex-item">40</li>
<li class="flex-item">41</li>
<li class="flex-item">42</li>
<li class="flex-item">43</li>
<li class="flex-item">44</li>
<li class="flex-item">45</li>
<li class="flex-item">46</li>
<li class="flex-item">47</li>
<li class="flex-item">48</li>
<li class="flex-item">49</li>
<li class="flex-item">50</li>
<li class="flex-item">51</li>
<li class="flex-item">52</li>
<li class="flex-item">53</li>
<li class="flex-item">54</li>
<li class="flex-item">55</li>
<li class="flex-item">56</li>
<li class="flex-item">57</li>
<li class="flex-item">58</li>
<li class="flex-item">59</li>
<li class="flex-item">60</li>
<li class="flex-item">61</li>
<li class="flex-item">62</li>
<li class="flex-item">63</li>
<li class="flex-item">64</li>
<li class="flex-item">65</li>
<li class="flex-item">66</li>
<li class="flex-item">67</li>
<li class="flex-item">68</li>
<li class="flex-item">69</li>
<li class="flex-item">70</li>
<li class="flex-item">71</li>
<li class="flex-item">72</li>
<li class="flex-item">73</li>
<li class="flex-item">74</li>
<li class="flex-item">75</li>
<li class="flex-item">76</li>
<li class="flex-item">77</li>
<li class="flex-item">78</li>
<li class="flex-item">79</li>
<li class="flex-item">80</li>
<li class="flex-item">81</li>
<li class="flex-item">82</li>
<li class="flex-item">83</li>
<li class="flex-item">84</li>
<li class="flex-item">85</li>
<li class="flex-item">86</li>
<li class="flex-item">87</li>
<li class="flex-item">88</li>
<li class="flex-item">89</li>
<li class="flex-item">90</li>
<li class="flex-item">91</li>
<li class="flex-item">92</li>
<li class="flex-item">93</li>
<li class="flex-item">94</li>
<li class="flex-item">95</li>
<li class="flex-item">96</li>
<li class="flex-item">97</li>
<li class="flex-item">88</li>
<li class="flex-item">99</li>
<li class="flex-item">100</li>
</ul>
You can make it using background: linear-gradient too. with less code.
Hope this helps :)
div {
width:100%;
height:100vh;
display:inline-block;
background: linear-gradient(163deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(161deg, transparent 0px, #181818 1px, #222 2px, #222 15px, transparent 15px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px), linear-gradient(343deg, transparent 0px, transparent 1px, #222 1px, #222 14px, transparent 14px);
background-color: #585858;
background-position: 2px 1px, 23px 16px,48px 15px, 21px 30px;
background-size: 48px 30px;
}
<div></div>
I have made a logic for you.
Suppose you have 4 items in first row, It means you will have 5 items in second row. So the total items in both row is 4+5=9
So you have to target these items :nth-child(9n) and nth-child(9n+5)
Note: (9n) can also be written as (9n+0) or (9n+9).
Just change the width of these items to half of the other items.
Stack Snippet
body {
display: flex;
min-height: 100%;
background: #ffffff;
}
html {
min-height: 100%;
}
.flex-container {
padding: 0;
width: 100%;
height: auto;
margin: 0;
list-style: none;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-item {
background: blue;
padding: 5px;
width: 25%;
height: 50px;
border: 5px solid #fff;
line-height: 30px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
box-sizing: border-box;
}
.flex-item:nth-child(9n),
.flex-item:nth-child(9n+5) {
width: 12.5%;
}
<ul class="flex-container wrap-reverse">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
<li class="flex-item">25</li>
<li class="flex-item">26</li>
<li class="flex-item">27</li>
<li class="flex-item">28</li>
<li class="flex-item">29</li>
<li class="flex-item">30</li>
<li class="flex-item">31</li>
<li class="flex-item">32</li>
<li class="flex-item">33</li>
<li class="flex-item">34</li>
<li class="flex-item">35</li>
<li class="flex-item">36</li>
<li class="flex-item">37</li>
<li class="flex-item">38</li>
<li class="flex-item">39</li>
<li class="flex-item">40</li>
<li class="flex-item">41</li>
<li class="flex-item">42</li>
<li class="flex-item">43</li>
<li class="flex-item">44</li>
<li class="flex-item">45</li>
<li class="flex-item">46</li>
<li class="flex-item">47</li>
<li class="flex-item">48</li>
<li class="flex-item">49</li>
<li class="flex-item">50</li>
<li class="flex-item">51</li>
<li class="flex-item">52</li>
<li class="flex-item">53</li>
<li class="flex-item">54</li>
<li class="flex-item">55</li>
<li class="flex-item">56</li>
<li class="flex-item">57</li>
<li class="flex-item">58</li>
<li class="flex-item">59</li>
<li class="flex-item">60</li>
<li class="flex-item">61</li>
<li class="flex-item">62</li>
<li class="flex-item">63</li>
<li class="flex-item">64</li>
<li class="flex-item">65</li>
<li class="flex-item">66</li>
<li class="flex-item">67</li>
<li class="flex-item">68</li>
<li class="flex-item">69</li>
<li class="flex-item">70</li>
<li class="flex-item">71</li>
<li class="flex-item">72</li>
<li class="flex-item">73</li>
<li class="flex-item">74</li>
<li class="flex-item">75</li>
<li class="flex-item">76</li>
<li class="flex-item">77</li>
<li class="flex-item">78</li>
<li class="flex-item">79</li>
<li class="flex-item">80</li>
<li class="flex-item">81</li>
<li class="flex-item">82</li>
<li class="flex-item">83</li>
<li class="flex-item">84</li>
<li class="flex-item">85</li>
<li class="flex-item">86</li>
<li class="flex-item">87</li>
<li class="flex-item">88</li>
<li class="flex-item">89</li>
<li class="flex-item">90</li>
<li class="flex-item">91</li>
<li class="flex-item">92</li>
<li class="flex-item">93</li>
<li class="flex-item">94</li>
<li class="flex-item">95</li>
<li class="flex-item">96</li>
<li class="flex-item">97</li>
<li class="flex-item">88</li>
<li class="flex-item">99</li>
</ul>
To further optimize, you really don't need to give each item a class.
And if there only should be number inside the li, use a CSS counter.
body {
display: flex;
min-height: 100%;
background: #ffffff;
}
html {
min-height: 100%;
}
.flex-container {
padding: 0;
width: 100%;
height: auto;
margin: 0;
list-style: none;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.wrap-reverse {
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
}
.flex-container li {
background: blue;
padding: 5px;
width: 25%;
height: 50px;
border: 5px solid #fff;
line-height: 30px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
box-sizing: border-box;
}
.flex-container li:nth-child(9n),
.flex-container li:nth-child(9n+5) {
width: 12.5%;
}
.flex-container {
counter-reset: my-counter;
}
.flex-container li:before {
counter-increment: my-counter;
content: counter(my-counter);
}
<ul class="flex-container wrap-reverse">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Thanks for all the help guys. Here is my final result :)
ul.wall {
list-style-type: none;
margin: 0;
padding:0;
}
li{
margin: 0;
}
.wall-bg{
background: #f8f8f8;
padding: 50px 0;
width: 100%;
}
.wall {
display: grid;
grid-template-columns: repeat(25, [col] 1fr);
grid-gap: 2px;
width: 100%;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
direction: rtl;
}
.brick {
background-color: #98471f;
/*height: 25px*/
grid-column: span 2;
color: #c98a6a;
text-align:center;
padding: 6px 0;
transform: rotate(180deg);
direction: ltr;
}
#media (min-width: 1200px) {
.brick:nth-child(26n),
.brick:nth-child(26n+1) {
grid-column: span 1;
}
}
#media (min-width: 800px) and (max-width: 1200px) {
.wall {
grid-template-columns: repeat(17, [col] 1fr);
}
/*.brick {
height: 20px;
}*/
.brick:nth-child(16n),
.brick:nth-child(16n+1) {
grid-column: span 1;
}
}
#media (max-width: 800px) {
.wall {
grid-template-columns: repeat(11, [col] 1fr);
}
/*.brick {
height: 20px;
}*/
.brick:nth-child(12n),
.brick:nth-child(12n+1) {
grid-column: span 1;
}
}
<div class="wall-bg">
<div class="container-fluid">
<ul class="wall">
<li class="brick">
001
</li>
<li class="brick">002</li>
<li class="brick">003</li>
<li class="brick">004</li>
<li class="brick">005</li>
<li class="brick">006</li>
<li class="brick">007</li>
<li class="brick">008</li>
<li class="brick">009</li>
<li class="brick">010</li>
<li class="brick">011</li>
<li class="brick">012</li>
<li class="brick">013</li>
<li class="brick">014</li>
<li class="brick">015</li>
<li class="brick">016</li>
<li class="brick">017</li>
<li class="brick">018</li>
<li class="brick">019</li>
<li class="brick">020</li>
<li class="brick">021</li>
<li class="brick">022</li>
<li class="brick">023</li>
<li class="brick">024</li>
<li class="brick">025</li>
<li class="brick">026</li>
<li class="brick">027</li>
<li class="brick">028</li>
<li class="brick">029</li>
<li class="brick">030</li>
<li class="brick">031</li>
<li class="brick">032</li>
<li class="brick">033</li>
<li class="brick">034</li>
<li class="brick">035</li>
<li class="brick">036</li>
<li class="brick">037</li>
<li class="brick">08</li>
<li class="brick">039</li>
<li class="brick">040</li>
<li class="brick">041</li>
<li class="brick">042</li>
<li class="brick">043</li>
<li class="brick">044</li>
<li class="brick">045</li>
<li class="brick">046</li>
<li class="brick">047</li>
<li class="brick">048</li>
<li class="brick">049</li>
<li class="brick">050</li>
<li class="brick">051</li>
<li class="brick">052</li>
<li class="brick">053</li>
<li class="brick">054</li>
<li class="brick">055</li>
<li class="brick">056</li>
<li class="brick">057</li>
<li class="brick">058</li>
<li class="brick">059</li>
<li class="brick">050</li>
<li class="brick">061</li>
<li class="brick">062</li>
<li class="brick">063</li>
<li class="brick">064</li>
<li class="brick">065</li>
<li class="brick">066</li>
<li class="brick">067</li>
<li class="brick">068</li>
<li class="brick">069</li>
<li class="brick">070</li>
<li class="brick">071</li>
<li class="brick">072</li>
<li class="brick">073</li>
<li class="brick">074</li>
<li class="brick">075</li>
<li class="brick">076</li>
<li class="brick">077</li>
<li class="brick">078</li>
<li class="brick">079</li>
<li class="brick">080</li>
<li class="brick">081</li>
<li class="brick">082</li>
<li class="brick">083</li>
<li class="brick">084</li>
<li class="brick">085</li>
<li class="brick">086</li>
<li class="brick">087</li>
<li class="brick">088</li>
<li class="brick">089</li>
<li class="brick">090</li>
<li class="brick">091</li>
<li class="brick">092</li>
<li class="brick">093</li>
<li class="brick">094</li>
<li class="brick">095</li>
<li class="brick">096</li>
<li class="brick">097</li>
<li class="brick">098</li>
<li class="brick">099</li>
<li class="brick">100</li>
<li class="brick">101</li>
<li class="brick">102</li>
<li class="brick">103</li>
<li class="brick">104</li>
<li class="brick">105</li>
<li class="brick">106</li>
<li class="brick">107</li>
<li class="brick">108</li>
<li class="brick">109</li>
<li class="brick">110</li>
<li class="brick">111</li>
<li class="brick">112</li>
<li class="brick">113</li>
<li class="brick">114</li>
<li class="brick">115</li>
<li class="brick">116</li>
<li class="brick">117</li>
<li class="brick">118</li>
<li class="brick">119</li>
<li class="brick">120</li>
<li class="brick">121</li>
<li class="brick">122</li>
<li class="brick">123</li>
<li class="brick">124</li>
<li class="brick">125</li>
<li class="brick">126</li>
<li class="brick">127</li>
<li class="brick">128</li>
<li class="brick">129</li>
<li class="brick">130</li>
<li class="brick">131</li>
<li class="brick">132</li>
<li class="brick">133</li>
<li class="brick">134</li>
<li class="brick">135</li>
<li class="brick">136</li>
<li class="brick">137</li>
<li class="brick">138</li>
<li class="brick">139</li>
<li class="brick">140</li>
<li class="brick">141</li>
<li class="brick">142</li>
<li class="brick">143</li>
<li class="brick">144</li>
<li class="brick">145</li>
<li class="brick">146</li>
<li class="brick">147</li>
<li class="brick">148</li>
<li class="brick">149</li>
<li class="brick">150</li>
</ul>
</div>
</div>
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 create a 2-level menu where level 1 is displayed horisontally and level 2 is displayed vertically. No fancy folding, just a plain sitemap'ish menu.
How it looks now:
How I would like it to look:
my html:
<nav class="menu">
<ul class="lvl1">
<li class="lvl1">Lorem</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Ipsum</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Dolor</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Sit</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
<li class="lvl1">Amet</li>
<ul class="lvl2">
<li class="lvl2">Vino</li>
<li class="lvl2">Fino</li>
<li class="lvl2">Dolce</li>
<li class="lvl2">Vita</li>
<li class="lvl2">Mamma Mia</li>
</ul>
</ul>
</nav>
my css:
.menu ul {list-style: none; }
ul.lvl1 {display: table; }
li.lvl1 {display: table-cell; font: bold 1.8em BlenderHeavy; color: white; }
ul.lvl2 {display: block; }
li.lvl2 {display: block; font: normal 1.2em BlenderHeavy; color: silver; }
This is simple, I suppose, but I am a css rookie.
Your HTML is invalid.
Try it:
.menu ul {
list-style: none;
}
ul.lvl1 {
display: table;
}
li.lvl1 {
display: table-cell;
font: bold 1.8em BlenderHeavy;
color: white;
}
ul.lvl2 {
display: block;
}
li.lvl2 {
display: block;
font: normal 1.2rem BlenderHeavy;
color: silver;
}
ul ul {
padding: 0;
}
<nav class="menu">
<ul class="lvl1">
<li class="lvl1">Lorem
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Ipsum
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Dolor
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Sit
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
<li class="lvl1">Amet
<ul class="lvl2">
<li class="lvl2">Vino
</li>
<li class="lvl2">Fino
</li>
<li class="lvl2">Dolce
</li>
<li class="lvl2">Vita
</li>
<li class="lvl2">Mamma Mia
</li>
</ul>
</li>
</ul>
</nav>
edited your code in this Fiddle
use float:left will resolve your problem
hope this will help
I'm using slickNav and its not properly reading my nested list.
This page is a repository for NPCS for a Table top RPG.
The top level is general information and organizes NPCs by location.
The second level organizes NPCs by rarity level
and the third level is the NPC's themselves.
Now interestingly, slickNav displays levels 1 and 2 just fine, but level 3 opens up to invisible text. I say invisible text because the amount of space that is revealed by the dropdown is correct.
This GIF shows what i'm talking about.
Observe how I click on Domestic animals, according the code below you can this is a long list of NPCs. The space SlickNav drops down is large.
Then observe how I click under Eol, this part of the site is undeveloped still, and so its only list item is " coming soon". Accordingly slickNav only drops down a little to make enough space for that.
According to http://slicknav.com/, it seems ive correctly nested my structure and labeled the menu as class="menu".
Its worth noting that on other parts of the site this menu works fine, but the menu's on those parts of the site are maximum of two levels deep.
Here is my HTML: Warning this is a big menu
<div class ="menu_wrap">
<nav id = "navMenu">
<ul class = "menu clearfix">
<li>Home
<ul class='subMenu1'>
<li id="instr">Instructions</li>
</ul>
</li>
<li>General
<ul class="subMenu1" >
<li>Domestic Animals
<ul class="subMenu2">
<li id="da1">Camel</li>
<li id="da2">War Camel</li>
<li id="da3">Druldon</li>
<li id="da4">Donkey</li>
<li id="da5">Pony</li>
<li id="da6">Draft Horse</li>
<li id="da7">Saddle Horse</li>
<li id="da8">Light War Horse</li>
<li id="da9">Heavy War Horse</li>
<li id="da10">Chariot Horse</li>
<li id="da11">Voran War Horse</li>
<li id="da12">Elven Narathi</li>
<li id="da13">Mountain Ram</li>
<li id="da14">War Elephant</li>
<li id="da15">War Mammoth</li>
<li id="da16">Dovashi Mastiff</li>
</ul>
</li>
<li>Common NPCs
<ul class="subMenu2">
<li id="guard1">Guard: Dovashi</li>
<li id="guard2">Guard: Dwarven</li>
<li id="guard3">Guard: Elven</li>
<li id="guard4">Guard: Gamoran</li>
<li id="guard5">Guard: Salatai</li>
<li id="guard6">Guard: Voran</li>
<li id="guard7">Guard: Dark Elf</li>
<li id="c5">Gnoll</li>
<li id="c6">Grimlock</li>
<li id="c11">Roper</li>
<li id="c12">Skeleton</li>
<li id="c13">Giant Spider</li>
<li id="c15">Zombie</li>
</ul>
<li>Uncommon NPCs
<ul class= "subMenu2">
<li id="uc5">Fire Child</li>
<li id="uc6">Ghoul</li>
<li id="uc11">Rakasa</li>
</ul>
</li>
<li>Rare NPCs
<ul class= "subMenu2">
<li id="r1">Adherer</li>
<li id="uc24">Arcane</li>
<li id="r3">Bane Dead</li>
<li id="r5">Fire Lord</li>
<li id="eleGen">Generic Elementalist</li>
<li id="necGen">Generic Necromancer</li>
<li id="illGen">Generic Illusionist</li>
<li id="cleGen">Generic Cleric</li>
<li id="r8">Radasai Warrior</li>
<li id="r9">Elemental(Fire)</li>
<li id="r10">Elemental(Water)</li>
<li id="r11">Elemental(Earth)</li>
<li id="r12">Elemental(Air)</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr1">Arch Shadow</li>
<li id="vr3">Gorgon</li>
<li id="vr4">Illithid</li>
<li id="new3">Vampire</li>
<li id="new4">Were Wolf</li>
</ul>
</li>
</ul>
</li>
<li id ="world_drop"> Wol
<ul class ="subMenu1" >
<li>Common NPCs
<ul class="subMenu2">
<li id="c1">Cave Bear</li>
<li id="c2">Dire Wolf</li>
<li id="c3">Echuyan</li>
<li id="c4">Goblin</li>
<li id="c7">Voran Raider</li>
<li id="c8">Dovashi Ronin</li>
<li id="c9">Naga</li>
<li id="c10">Orc</li>
<li id="c14">Umber Hulk</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc1">Ant (Giant)</li>
<li id="uc2">Alaghi</li>
<li id="uc3">Centaur</li>
<li id="uc4">Dire Boar</li>
<li id="uc7">Ogre</li>
<li id="uc8">Orc(Black)</li>
<li id="uc9">Orc (Shaman)</li>
<li id="uc10">Owl Bear</li>
<li id="uc12">Rastipede</li>
<li id="uc13">Troll</li>
<li id="new1">Young Black Wyvern</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r2">Ant Lion( giant)</li>
<li id="new2">Adult Black Wyvern</li>
<li id="r4">Basilisk</li>
<li id="r6">Hill Giant</li>
<li id="r7">Naga Elite</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr2">Dray</li>
<li id="vr5">kalin</li>
<li id="vr6">Naga Queen</li>
<li id="vr7">Minotaur</li>
</ul>
</li>
</ul>
</li>
<li> Nol
<ul class="subMenu1">
<li>Common NPCs
<ul class="subMenu2">
<li id="c16">Abrian</li>
<li id="c17">Cave Bear (Polar)</li>
<li id="c18">Dwarven Bandits</li>
<li id="c19">Ettin</li>
<li id="c20">Frost Orc</li>
<li id="c21">Tus'Khul</li>
<li id="c22">Icemaw Raiders</li>
<li id="c23">Kenku</li>
<li id="c24">Kobold</li>
<li id="c25">Tundra Stag</li>
<li id="c26">Wight</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="subMenu2">
<li id="uc14">Bainligor</li>
<li id="uc15">Ettin (Mage)</li>
<li id="uc16">Blue Orc</li>
<li id="uc17">Goatmen</li>
<li id="uc18">Ice Golem</li>
<li id="uc19">Rogue ClockWork</li>
<li id="uc20">Snow Serpent</li>
<li id="uc21">Ice Wyvern(Young)</li>
<li id="uc22">Voldun</li>
</ul>
</li>
<li>Rare NPCs
<ul class="subMenu2">
<li id="r13">Aviarag</li>
<li id="r14">Crystal Hydra</li>
<li id="r15">Dark Hood</li>
<li id="r16">Derro Warrior</li>
<li id="r17">Frost Giant</li>
<li id="r18">Gargoyle</li>
<li id="r19">Ice Wyvern(Adult)</li>
<li id="r20">Mammoth</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="subMenu2">
<li id="vr8">White Dragon</li>
<li id="vr9">Pit Horror</li>
<li id="vr10">Frozen Men</li>
<li id="vr11">Vaporighu</li>
</ul>
</li>
</ul>
<li id ="indie_drop"> Sol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSubMenu2">
<li id="c27">Cistern Fiend</li>
<li id="c28">Dire Crocodile</li>
<li id="c29">Dire Lion</li>
<li id="c30">Gamoran Exiles</li>
<li id="c31">Giant Scorpion</li>
<li id="c32">Myconid</li>
<li id="c33">Sand Bones</li>
<li id="c34">Salatai Bandits</li>
<li id="c35">Shissai half Breed</li>
<li id="c36">Tus-Kowah</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSubMenu2">
<li id="uc23">Amiq-Rasol</li>
<li id="uc25">Beholder-Kin</li>
<li id="uc26">Gremlin</li>
<li id="uc27">Lesser Salamander</li>
<li id="uc28">Mummy</li>
<li id="uc29">Scrab</li>
<li id="uc30">Spell-Sword Merc.</li>
<li id="uc31">Shissai Pure Blood</li>
<li id="uc32">Will-O-Wisp</li>
</ul>
</li>
<li>Rare NPCs
<ul class="leftSubMenu2">
<li id="r21">Assimar</li>
<li id="r22">Elephant</li>
<li id="r23">Hattori</li>
<li id="r24">Roc</li>
<li id="r25">Sand-Men</li>
<li id="r26">Skordi</li>
<li id="r27">Tortle</li>
<li id="r28">Winged Snake</li>
</ul>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li id="vr12">Beholder</li>
<li id="vr13">Black Dragon</li>
<li id="vr15">Djinn</li>
<li id="vr14">Mummy Lord</li>
<li id="vr16">Sand Hydra</li>
</ul>
</li>
</ul>
</li>
<li> Eol
<ul class="subMenu1">
<li>Common NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
<li>Uncommon NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
<li>Very Rare NPCs
<ul class="leftSUbMenu2">
<li>Comming Soon</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
This is all the CSS associated with the Menu.
Note: This is a simple CSS menu, the submenus are set to display:none and on hover the display is set to block.
All my menus work the same way on other parts of the site. But display being set to none is the only thing I can think of.
#navMenu{
margin:0;
padding: 0;
position: absolute;
line-height: 2em;
top: 28%;
left: 5.1%;
width: 100%;
font-size: 1.2vw;
font-family: verdana,arial,serif;
cursor: pointer;
z-index: 3;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 2vw;
}
#navMenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background: #999;
padding:.5em;
}
#navMenu ul li {
text-align: center;
text-decoration: none;
height: 1.875em;
width:13.5vw;
display: block;
color: #e0e0da;
background: black;
border-color: #99cdde;
border: 1px solid #99cdde;
}
.subMenu1,.subMenu2{
position: absolute;
display: none;
top: 100%;
left: -.25%; /*this fixes a menu alignment problem */
cursor: pointer;
}
.subMenu2{
position: absolute;
left: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
}
.leftSubMenu2{
position: absolute;
right: 100%;
top: 0%;
overflow-y: auto;
overflow-x:hidden;
height: 30vh;
display: none;
}
#navMenu ul li:hover>ul {
display: block;
}
#navMenu ul li:hover{
transition:all linear .15s;
color: #99cdde;
}