響應式網站下拉表單問題

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」），但我有背景顏色的問題，這應該只是一個演示網站。