Currently my HTML is displaying like this:
I want it to display like this:
The buttons need to be vertically aligned with the text using flex-box, or another method that does not require padding, margin (margin:auto is fine), or offsets.
http://codepen.io/simply-simpy/pen/vKpAYN
HTML:
<ul class="nav">
<li>about
<button>+</button>
<ul>
<li>Level 2 nav item
<button>+</button>
<ul>
<li>Level 3 nav item</li>
<li>Level 3 nav item</li>
<li>Level 3 nav item</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.nav {
width: 300px;
}
button {
display: inline-block;
width: 25px;
height: 25px;
align-self: flex-end;
}
ul {
list-style-type: none;
}
ul > ul li{
padding-left: 20px;
}
ul > ul > ul li {
padding-left: 40px;
}
li {
display: flex;
flex-direction: column;
line-height: 3;
}
a {
border-top: 1px solid black;
}
You can group button and a in one div and use display: flex on that div with align-items: center to vertically center items.
.nav {
width: 300px;
}
button {
width: 25px;
height: 25px;
}
ul {
list-style-type: none;
}
ul > ul li {
padding-left: 20px;
}
ul > ul > ul li {
padding-left: 40px;
}
li {
width: 100%;
border-top: 1px solid black;
}
a {
padding: 20px 0;
display: block;
}
div {
display: flex;
align-items: center;
justify-content: space-between;
}
<ul class="nav">
<li>
<div>
about
<button>+</button>
</div>
<ul>
<li>
<div>
Level 2 nav item
<button>+</button>
</div>
<ul>
<li>Level 3 nav item
</li>
<li>Level 3 nav item
</li>
<li>Level 3 nav item
</li>
</ul>
</li>
</ul>
</li>
</ul>
Related
Did I make a dropdown menu where I run into problems when I align the menu on the right side in the browser? The last submenu item sits further out of the browser's box-model. How do I control the placement of the dropdown (left, center and right)? Follow the link below:
.navbar-menu-one {
display: flex;
}
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 23px;
display: block;
}
ul li:hover {
background-color: #ccc;
}
ul ul {
position: absolute;
min-width: 200px;
display: none;
background-color: #ccc;
}
ul ul li {
display: block;
background-color: #e3e3e3;
}
ul li:hover ul {
display: block;
}
.item-nav-right {
float: right;
margin-right: 0px;
}
<nav class="navbar-menu-one item-nav-right">
<ul>
<li>Menu</li>
<li>Menu
<ul style="">
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
<li>Menu</li>
<li>Menu
<ul>
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
</ul>
</nav>
Link : Codepen
Based on the code and the existing resources, I managed to fix it by implementing the syntax below and the element
display: flex;
flex-direction: row-reverse;
direction: rtl;
improvement :
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row-reverse;
direction: rtl;
}
I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one
Space between menu and drop down menu
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 long lel</li>
<li>Sub Menu 3 really bare long mad</li>
<li>Sub Menu 4 dvg</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg</li>
<li>sdfg</li>
<li>sdfgsdfgsdfgsdfg</li>
<li>sdfgsdfgsdfgsdfgsdfg</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</li>
<li>sfdgsdfgsdfgl</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li class="point">pages</li>
<li class="point">light version</li>
</ul>
UPDATE:
Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.
The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.
Check the updated Snippet bellow with an updated solution.
Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.
So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.
/* Reset the ul style */
ul {
list-style: none;
padding: 0;
margin: 0;
}
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao {
width: 100%;
text-align: center;
}
.lmao li {
display: inline-block;
background-color: white;
padding: 15px;
position: relative;
padding: 20px;
}
.lmao li a {
text-decoration: none;
color: black;
}
.lmao li a:hover {
text-decoration: none;
color: #f38763;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
top: 100%;
min-width: 200px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2 long lel
</li>
<li>Sub Menu 3 really bare long mad
</li>
<li>Sub Menu 4 dvg
</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li>sdfg
</li>
<li>sdfgsdfgsdfgsdfg
</li>
<li>sdfgsdfgsdfgsdfgsdfg
</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf
</li>
<li>sfdgsdfgsdfgl
</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<li>Sub Deep 1
</li>
<li>Sub Deep 2
</li>
<li>Sub Deep 3
</li>
<li>Sub Deep 4
</li>
</ul>
</li>
<li>Deep Menu 2
</li>
</ul>
</li>
</ul>
</li>
<li class="point">pages
</li>
<li class="point">light version
</li>
</ul>
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
<body>
<nav>
<ul>
<li>One
<ul>
<li>A</li>
<li>B
</ul>
</li>
<li>Two
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Three
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
I am having issue where the Nav UL with class .hidden is appearing off the screen when the navigation link is at the end and there is not enough space for it to show.
The following screenshot illustrates what happens when you gradually resize the browser, you will be able to see the issue.
Code pen example
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul id="menu">
<li>
Nav Item 1 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 2
</li>
<li>
Nav Item 3
</li>
<li>
Nav Item 4
</li>
<li>
Nav Item 5 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 6
</li>
<li>
Nav Item 7
</li>
<li>
Nav Item 8 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
nav li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue";
color: #fff;
background: #A80B0D;
text-decoration: none;
}
#show-menu {
display: none;
}
.show-menu {
font-family: "Helvetica Neue";
text-decoration: none;
color: #fff;
background: #A80B0D;
text-align: center;
padding: 10px;
display: block;
}
nav li:hover ul a:hover {
background: #DDDDDD;
color: #000;
}
nav li:hover a {
background: #333333;
}
nav ul li a:hover + .hidden,nav .hidden:hover {
display: block ;
}
nav input[type=checkbox]:checked ~ #menu {
display: block;
}
#media (min-width: 750px) {
.show-menu {
display: none;
}
nav ul#menu {
display: block;
text-align: center;
}
nav ul#menu {
width: 100%;
background-color: #A80B0D;
}
nav ul#menu li {
display: inline-block;
}
nav ul#menu ul.hidden li {
display: block;
min-width: 200px;
}
nav ul.hidden {
position: absolute;
}
nav li a {
padding-left: 10px;
padding-right: 10px;
}
}
just add those lines to your css:
nav ul li {
position: relative;
}
nav ul li:last-child ul {
right: 0;
}
Result:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
nav li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue";
color: #fff;
background: #A80B0D;
text-decoration: none;
}
#show-menu {
display: none;
}
.show-menu {
font-family: "Helvetica Neue";
text-decoration: none;
color: #fff;
background: #A80B0D;
text-align: center;
padding: 10px;
display: block;
}
nav li:hover ul a:hover {
background: #DDDDDD;
color: #000;
}
nav li:hover a {
background: #333333;
}
nav ul li a:hover + .hidden,
nav .hidden:hover {
display: block;
}
nav input[type=checkbox]:checked ~ #menu {
display: block;
}
nav ul li {
position: relative;
}
nav ul li:last-child ul {
right: 0;
}
#media (min-width: 750px) {
.show-menu {
display: none;
}
nav ul#menu {
display: block;
text-align: center;
}
nav ul#menu {
width: 100%;
background-color: #A80B0D;
}
nav ul#menu li {
display: inline-block;
}
nav ul#menu ul.hidden li {
display: block;
min-width: 200px;
}
nav ul.hidden {
position: absolute;
}
nav li a {
padding-left: 10px;
padding-right: 10px;
}
}
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul id="menu">
<li>
Nav Item 1 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 2
</li>
<li>
Nav Item 3
</li>
<li>
Nav Item 4
</li>
<li>
Nav Item 5 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 6
</li>
<li>
Nav Item 7
</li>
<li>
Nav Item 8 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
I have some problem with my horisontal drop down menu. The sub_menu is not appearing under its parent. Can anyone help me get it right? What am I doing wrong? I want the menu to be 100% wide and centerd.
nav {
max-width: 100%;
text-align: center;
}
nav > ul > li {
padding: 10px;
display: inline;
}
nav ul li a {
font-family: sans-serif;
font-size: 1em;
color: #000;
}
nav ul li:hover .sub_menu {
display: block;
}
.sub_menu {
display: none;
position: absolute;
}
<nav>
<ul>
<li>link 1
</li>
<li>link 2
<ul class="sub_menu">
<li>link 2.1
</li>
<li>link 2.2
</li>
</ul>
</li>
<li>link 3
<ul class="sub_menu">
<li>link 3.1
</li>
<li>link 3.2
</li>
</ul>
</li>
</ul>
</nav>
Two steps
1. Set position: relative; for li:
nav > ul > li {
padding: 10px;
display: inline;
position: relative;
}
2. Set right: 0; for ul:
.sub_menu {
display: none;
position: absolute;
right: 0;
}
jsFiddle
I'm trying to show a UL with two LI's per row and have all of the text centered. So far the LI's simply go to the left side of the UL.
ul {
text-align: center;
list-style-type: none;
width: 100%;
}
ul li {
display: inline;
}
ul li:nth-child(2n+1) {
clear: both;
}
<ul style="">
<li>item
</li>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>
You need to float the lis (and not make them inline), and clear the left of odd lis
ul
{
list-style:none;
text-align: center;
}
ul li
{
float: left;
}
ul li:nth-child(2n+1) { /*or ul li:nth-child(odd)*/
clear: left;
}
https://jsfiddle.net/nivas/yyt46dkL/
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
ul {
display: inline-block;
list-style-type: none;
overflow: hidden;
}
li {
width: 50%;
float: left;
}
a {
display: block;
border: 1px solid;
margin: .25em;
}
a:hover {
background-color: silver;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
}
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Forth item</li>
</ul>
Figured it out.
ul {
text-align: center;
list-style-type: none;
width: 100%;
}
ul li {
display: inline;
}
ul li:nth-child(2n+1) {
clear: both;
}
ul li:nth-child(2n+1)::before{
display: block;
content: ' ';
}
<ul style="">
<li>item
</li>
<li>item
</li>
<li>item
</li>
<li>item
</li>
</ul>