/ / Problema del formulario desplegable del sitio web sensible - zurb-foundation, zurb-foundation-5

Sitio web receptivo Problema de formulario desplegable - zurb-foundation, zurb-foundation-5

Estoy teniendo un pequeño problema con un formulario en un menú desplegable en el marco de la fundación 5.

Básicamente estoy asignando un campo de entrada y un botón a un menú desplegable, que funciona bien.

Pero como no puedo ver primero un botón Atrás como puedo en el primer menú desplegable, no veo ningún motivo. Cuando el código básico es una replicación.

Después de ver el segundo menú desplegable y volver al menú para ver el menú desplegable uno, el campo de entrada y el botón están visibles ...

Código fuente a continuación:

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>

Respuestas

0 para la respuesta № 1

Lo arreglé para solucionarlo al final. Resulta que no se necesita una opción de menú desplegable.

Codifique de la siguiente manera:

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>

Puede haber mejores formas de hacerlo (por ejemplo, eliminar una fila en blanco con "& nspb") pero tuve problemas con los colores de fondo, y se supone que esto solo es un sitio de demostración.