How do I vertically align elements within a li in that code? - html

Question

I want to vertically align the a links 1-4 under the class dropdown-menu.
In this example I'm trying to do this by displaying the div as a table-row but nothing worked.
CODE
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a,
.dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>

Answer 1

There are different ways to do it, but one simple way is to use display: block on the links.
(fiddle)
Here's a related question/answer related to how inline vs block work.

Answer 2

[1] Get rid of overflow: hidden on the ul
[2] Make the dropdown absolutely positioned:
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
[3] Establish the li as the parent.
li {
...
position: relative;
}
[4] Set up a hovering rule over the anchor next to the hidden dropdown menu.
.dropdown:hover .dropdown-menu {
visibility: visible;
}
Demo: https://jsfiddle.net/b3gbowrn/
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
}
li {
float: left;
position: relative;
border: 1px solid rgba(0,0,0,0.25);
border-right: none;
}
li:last-child {
border: 1px solid rgba(0,0,0,0.25);
}
.dropdown:hover .dropdown-menu {
visibility: visible;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
visibility: hidden;
}
li a, .dropdown-btn {
display: inline-block;
padding: 18px 22px;
}
div {
display: table-row;
}
div a {
display: inline;
vertical-align: middle;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-menu">
Link 1
Link 2
Link 3
Link 4
</div>
</li>
</ul>

Answer 3

use inline-block in li
change your HTML to be semantically correct to a menu, by using ul li in dropdown
apply to your dropdown position:absolute and top:100% with relative to li
if you want to make it show/hide, you can use :hover in li
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1ebb90;
}
li {
display: inline-block;
vertical-align: top;
position: relative
}
li a,
.dropdown-btn {
display: block;
padding: 18px 22px;
}
li ul {
position: absolute;
top: 100%;
left: 0;
background: red;
display: block;
width: 100%;
text-align: center;
display: none
}
li:hover ul {
display: block
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Blog
</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li> Link 1
</li>
<li> Link 2
</li>
<li> Link 3
</li>
<li> Link 4
</li>
</ul>
</li>
</ul>