title: How to force menu to open upwards in a searchable dropdown?
body: <p>I have an html code below</p>
  
  
    Dropdown-->
    
      
      About
      Base
      Blog
      Contact
      Custom
      Support
      Tools
    
  
  
  <p>Its basically taken from this website <a href="https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter</a></p>
  
  <p>This is how it looks like</p>
  
  <p><a href="https://i.stack.imgur.com/ANn7J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ANn7J.png" alt="enter image description here"></a></p>
  
  <p>It does a search on the items displayed in the menu. Now I want this menu to open upwards and not downwards</p>
  
  <p>On looking online, I found I have to provide <code>bottom: 100%;</code> <a href="https://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css">Drop-down menu that opens up/upward with pure css</a>. Now in my case, there are no <code>&lt;ul&gt;</code> or <code>&lt;li&gt;</code> tags. So this is what I did</p>
  
  <pre><code>.dropdown {
    position: relative;
    display: inline-block;
    bottom: 100%; //added this
  }
  </code></pre>
  
  <p>But it doesn't do anything. How can I force the menu to show upwards?</p>