/ / Formulário de lista suspensa de site responsivo - zurb-foundation, zurb-foundation-5

Questão de formulário suspenso de website responsivo - zurb-foundation, zurb-foundation-5

Estou tendo um pequeno problema com um formulário em uma lista suspensa na estrutura da base 5.

Basicamente eu estou atribuindo um campo de entrada e botão para um menu suspenso, que funciona bem.

Mas como eu não posso ver primeiro um botão Voltar como eu posso no primeiro menu suspenso, eu não consigo ver por que razão. Quando o código básico é uma replicação.

Depois de visualizar o segundo menu suspenso e voltar ao menu para ver o menu suspenso, o campo e o botão de entrada ficam visíveis ...

Código fonte abaixo:

CSS:

      .has-form-small {

top: 0rem;
left: 0rem;
min-width: 15rem; }
@media only screen and (max-width: 40em) {
.has-form {
min-width: 10rem;
top: 0 rem; }
.has-form .button {
height: 3rem; } }
</style>

HTML: Dropdown 1:

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>
</section>

Dropdown 2:

    <section class="top-bar-section">
<!-- Right Nav Section-->
<strong class="show-for-small-only">
<ul class="right">
<li class="has-dropdown">
<a href="#">Dropdown2</a>
<ul class="dropdown">
<li class="has-form-small">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</strong>
</section>

Respostas:

0 para resposta № 1

Conseguido consertar no final. Acontece que uma opção do menu suspenso não é necessária.

Código como abaixo:

CSS:

    <style>
.has-form-small {
color: darkslategray;
position: absolute;
top: 0rem;
left: 0rem;
min-width: 26rem;
min-height: 2.7rem;}
@media only screen {
.has-form-small {
color: darkslategray;
min-width: 26rem;
min-height: 2.7rem;
top: 0rem; }
.has-form-small .button {
color: darkslategray;
width:  10rem;}}
</style>

HTML:

<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">My Site</a></h1>
</li>
<strong class="hide-for-small-only">
<li class="has-form">
<div class="row collapse">
<div class="large-9 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</div>
</li>
</strong>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li><a>&nbsp</a></li>
<li>
<strong class="show-for-small-only">
<li class="has-form-small">
<div class="large-12 small-9 columns">
<input type="text" placeholder="Find Stuff">
</div>
<div class="large-3 small-3 columns">
<a href="#" class="alert button expand">Search</a>
</div>
</li>
</strong>
</li>
</ul>



<ul class="right">
<li><a href="#">Button</a></li>
<li class="has-dropdown">
<a href="#">Dropdown</a>
<ul class="dropdown">
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
</ul>

<!-- Left Nav Section -->
<ul class="left">

</ul>
</section>
</nav>

Pode haver maneiras melhores de fazer isso (por exemplo, remover linha em branco com "& nspb"), mas eu estava tendo problemas com as cores de plano de fundo, e isso deve ser apenas um site de demonstração.