Drop-Down Menu That Opens Up/Upward With Pure Css

Drop-down menu that opens up/upward with pure css

Add bottom:100% to your #menu:hover ul li:hover ul rule

Demo 1

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%; /* added this attribute */
}

Or better yet to prevent the submenus from having the same effect, just add this rule

Demo 2

#menu>ul>li:hover>ul { 
    bottom:100%;
}

Demo 3

source: http://jsfiddle.net/W5FWW/4/

And to get back the border you can add the following attribute

#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}

How to force menu to open upwards in a searchable dropdown?

You could do this using Flexbox:

.dropdown-content.show {
    display: flex;
    flex-direction: column-reverse;
    bottom: 45px; /* hardcoded height of the button */
}

Using w3cschool's existing code:

/* When the user clicks on the button,toggle between hiding and showing the dropdown content */function myFunction() {  var dropdown, button;  dropdown = document.getElementById("myDropdown");  button = document.getElementById("myButton");  dropdown.classList.toggle("show");  dropdown.style.bottom = button.offsetHeight + "px";}
function filterFunction() {  var input, filter, ul, li, a, i;  input = document.getElementById("myInput");  filter = input.value.toUpperCase();  div = document.getElementById("myDropdown");  a = div.getElementsByTagName("a");  for (i = 0; i < a.length; i++) {    txtValue = a[i].textContent || a[i].innerText;    if (txtValue.toUpperCase().indexOf(filter) > -1) {      a[i].style.display = "";    } else {      a[i].style.display = "none";    }  }}

.dropbtn {  background-color: #4CAF50;  color: white;  padding: 16px;  font-size: 16px;  border: none;  cursor: pointer;}
.dropbtn:hover,.dropbtn:focus {  background-color: #3e8e41;}
#myInput {  box-sizing: border-box;  background-image: url('searchicon.png');  background-position: 14px 12px;  background-repeat: no-repeat;  font-size: 16px;  padding: 14px 20px 12px 45px;  border: none;  border-bottom: 1px solid #ddd;}
#myInput:focus {  outline: 3px solid #ddd;}
.dropdown {  position: relative;  display: inline-block;  padding-top: 250px; /* just for demo purposes */}
.dropdown-content {  display: none;  position: absolute;  background-color: #f6f6f6;  min-width: 230px;  overflow: auto;  border: 1px solid #ddd;  z-index: 1;  flex-direction: column-reverse; /* show children in a reversed colum (bottom to top) */}
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}
.dropdown a:hover {  background-color: #ddd;}
.show {  display: flex;}

<h2>Search/Filter Dropdown</h2><p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">  <button id="myButton" onclick="myFunction()" class="dropbtn">Dropdown</button>  <div id="myDropdown" class="dropdown-content">    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">    <a href="#about">About</a>    <a href="#base">Base</a>    <a href="#blog">Blog</a>    <a href="#contact">Contact</a>    <a href="#custom">Custom</a>    <a href="#support">Support</a>    <a href="#tools">Tools</a>  </div></div>

How to make dropdown menu appears below

Just add top: 100% for the submenus:

nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  background-color: rgba(255, 238, 238, 0.89);
  backdrop-filter: blur(5px);
  border-radius: 0px 0px 4px 4px;
}

This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.

Dropdown menu appearing upwards instead of downwards

This happens because your HTML is wrong. You should put the content of your submenu after the menu text.

Replace

<div class="dropDown">
    <div class="dropDownContent">
        <a href="?o1">Option 1</a>
        <a href="?o2">Option 2</a>
    </div>
    <a class="dropDownP">Dropdown</a>
</div>

<div class="dropDown">
    <a class="dropDownP">Dropdown</a>
    <div class="dropDownContent">
        <a href="?o1">Option 1</a>
        <a href="?o2">Option 2</a>
    </div>
</div>

Also, to make the dropdown not take any place in the menu (so it doesn't make it expand) you need to position it absolutely.

.dropDownContent{
    position:absolute;
    top:100%;
}

As for your third question, you need to use media queries. I can't really guide you more on this part as there are too many useless elements in your fiddle.

CSS | Dropdown at bottom of page is cut off

i cannot see the dropdown, but you can have your dropdown showing upwards with pure css, see this question/answer

i hope it can help

How to do custom dropdown upwards other than bootstrap

Try with this updates,

Use this CSS as below

.need_help_dropdown {
   padding:0; 
   display:none; 
   background:#ccc;
   position:absolute;
   bottom:0;
 }

Drop-Down Menu That Opens Up/Upward With Pure Css