我正在使用一个名为 Bulma 的 CSS 框架，我正在尝试在 Bulma导航栏中实现一个搜索栏。我正在尝试将自动完成功能添加到搜索栏。因此，在输入字段的正下方，我添加了一个面板块（有点类似于引导列表组）：
<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>
但是因为这个无序列表仍然是导航栏的一部分，所以导航栏将所有这些列表项都包裹了起来，这使得导航栏变大了。这是我的导航栏的内容：
<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>
我尝试添加style="overflow: hidden;"到根<nav>元素。没用。如何在不放大导航栏的情况下显示列表项？
可以在这个JSFiddle上找到完整的演示（请缩小 JSFiddle 左栏的大小以便在桌面视图中看到它）。