响应式网站下拉表单问题

Question

我在基金会5框架中的下拉式表单中遇到了一些问题。

基本上我将一个输入字段和按钮分配给下拉菜单，它工作正常。

但是因为我不能首先看到后退按钮，就像我可以在第一个下拉菜单中看到的一样，所以我看不到任何原因。基本代码是复制时。

观看第二个下拉并回到菜单，查看下拉一个输入框和按钮都可见后...

源代码如下：

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> 

Answer 1

管理到最后修复。原来不需要下拉菜单选项。

代码如下：

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> 

可能有更好的方法来做到这一点（如删除空行以 “& nspb”），但我有背景颜色的问题，这应该只是一个演示网站。