How to make the dropdown menu open down instead of sideways? - html

Question

Problem with launching of the dropdown menu
I tried to see if it was possible to use the position or text-align properties of CSS.
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a, .dropdown-content a{
float: right;
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background: red;
color: black;
}
.navbar a:active{
background: green;
color: black;
}
.dropdown-content {
display: none;
background-color: #333;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class = "navbar">
Page 6
Page 5
Page 4
Page 3
Page 2
<div class="dropdown">
<a class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
<ul>
Link 3
Link 2
Link 1
</ul>
</div>
</div>
</div>
Dropdown menu is opening sideways, to the left of the dropdown button, in the navbar instead of downwards. How to make it go downwards?

Answer 1

Nest your menus and sub menus in an unordered list
<ul id='menu'>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a></li>
<li><a href='#'>Submenu3</a></li>
</ul>
</li>
Check out this JSSfiddle on how to setup the stylesheet.

Answer 2

You need to make the dropdown-content absolutely positioned and allow overflow on the navbar. So, your css should look something like this:
.navbar {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.dropdown {
position: relative;
float: right;
}
.navbar a{
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar > a, .dropbtn {
float: right;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background: red;
color: black;
}
.navbar a:active{
background: green;
color: black;
}
.dropdown-content {
position: absolute;
top: 100%;
display: none;
background-color: #333;
}
.dropdown-content a {
display: block;
}
.dropdown-content a:hover {
background-color: red;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div class = "navbar">
Page 6
Page 5
Page 4
Page 3
Page 2
<div class="dropdown">
<a class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 3
Link 2
Link 1
</ul>
</div>
</div>
</div>
Here is a fiddle with the results: https://jsfiddle.net/dLmr7wbk/