Navigation bar gets larger as soon as a new HTML element is appended

Question

I am using a CSS framework called Bulma and I am trying to implement a search bar in the Bulma navigation bar . I am trying to add the autocomplete functionality to the search bar. So, right below the input field, I added a panel-block (which is somewhat similar to bootstrap list groups):

<input class="input" type="text" placeholder="Text input">
<ul>
    <li><a class="panel-block" href="#">Lorem</a></li>
    <li><a class="panel-block" href="#">Ipsum</a></li>
    <li><a class="panel-block" href="#">Dolor</a></li>
    <li><a class="panel-block" href="#">Sit</a></li>
    <li><a class="panel-block" href="#">Amet</a></li>
</ul>

But because this unordered list is still part of the navigation bar, the navigation bar wraps all of these list items, which makes the navigation bar bigger. Here is the content of my navbar:

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <button class="button navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>

  <div class="navbar-end">
    <div class="navbar-item field">
        <div class="control">
            <input class="input" type="text" placeholder="Text input">
            <ul>
                <li><a class="panel-block" href="#">Lorem</a></li>
                <li><a class="panel-block" href="#">Ipsum</a></li>
                <li><a class="panel-block" href="#">Dolor</a></li>
                <li><a class="panel-block" href="#">Sit</a></li>
                <li><a class="panel-block" href="#">Amet</a></li>
            </ul>
        </div>
    </div>
  </div>
</nav>

I tried adding style="overflow: hidden;" to the root <nav> element. Didn't work. How can I show the list items without having the navbar enlarged?

A complete demo can be found on this JSFiddle (Please reduce the size of the left column of JSFiddle to see it in desktop view).

Answer 1

If you want the list to break out of its parent container, you could set the position to absolute and the width to 100% (provided that the parent container has a position of relative ).

Example here: http://jsfiddle.net/wn03dsj8/2/