菜單項不會彼此排列

我需要一些CSS幫助。我正在嘗試修改phpBB樣式（Absolution）以包含新的下拉菜單項。你可以在這裏看到：菜單項不會彼此排列

我想要的產品下拉導航欄上模仿搜索下拉。這主要是因爲我複製並粘貼了搜索下拉菜單的代碼。但是當你將鼠標懸停在它上面時，項目1和2位於同一行。我希望Herbs的n種子在藥草盒下面。

我用我平常的技巧在Firebug中查看它並使用設置進行遊戲。我想添加顯示：塊會做的伎倆，但顯然它沒有。我錯過了一些東西。因爲我不是CSS大師，所以我會欣賞更有經驗的眼睛。

發佈代碼是一個挑戰，因爲它全部來自phpBB的模板系統。下面是菜單上的搜索項目是什麼在起作用：

  <li class="float-right<!-- IF SCRIPT_NAME eq 'search' --> active<!-- ENDIF -->"> 
       <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search<!-- IF S_USER_LOGGED_IN -->-drop<!-- ENDIF -->.png" width="16" height="16" alt="" />{L_SEARCH}</a> 
       <!-- IF S_USER_LOGGED_IN --> 
        <div style="clear: both;"></div> 
        <ul class="drop"> 
         <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li> 
         <!-- IF S_LOAD_UNREADS --> 
          <li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li> 
          <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li> 
          <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li> 
         <!-- ENDIF --> 
        </ul> 
       <!-- ENDIF -->      
      </li> 
      <li class="divider float-right"></li> 
      <li class="float-right<!-- IF SCRIPT_NAME eq 'search' --> active<!-- ENDIF -->"> 
       <a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/search<!-- IF S_USER_LOGGED_IN -->-drop<!-- ENDIF -->.png" width="16" height="16" alt="" />{L_SEARCH}</a> 
       <!-- IF S_USER_LOGGED_IN --> 
        <div style="clear: both;"></div> 
        <ul class="drop"> 
         <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li> 
         <!-- IF S_LOAD_UNREADS --> 
          <li><a href="{U_SEARCH_UNREAD}">{L_SEARCH_UNREAD}</a></li> 
          <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li> 
          <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li> 
         <!-- ENDIF --> 
        </ul> 
       <!-- ENDIF -->      
      </li> 
      <li class="divider float-right"></li>

，這裏是我的複製和粘貼：

  <li class="float-right"><a href="http://homegrownherbalist-net.myshopify.com/collections/all">Products</a> 
       <div style="clear: both;"></div> 
       <ul class="drop"> 
        <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/herb-kits" target="_blank">Herb Kits</a></li> 
        <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/herbs-n-seeds" target="_blank">Herbs 'n Seeds</a></li> 
        <li style="display:block;"><a href="http://homegrownherbalist-net.myshopify.com/collections/books" target="_blank">Books</a></li> 
       </ul> 
      </li>

來源

2014-03-03 Mark

請張貼一些代碼，所以我們實際上可以幫助你解決問題，並列出到目前爲止，你已經嘗試過的情況。 – TylerH

你可以嘗試添加'.drop li {clear：both;}'，但是我不確定這是否是你試圖實現的。 – melc

非常好！這工作！ – Mark

你必須給#nav ul li ul.drop聲明width: auto。目前它設置爲200px。

#nav ul li ul.drop { 
    background: #ebf4fc; 
    padding: 5px; 
    position: absolute; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border: 1px solid #cee1f3; 
    display: none; 
    z-index: 9999; 
    //width: 200px; 
    width: auto; //change here 
    margin-top: -5px; 
}

來源

2014-03-03 22:53:33 Sebsemillia

這應該也適用。 – Mark

一種可能的解決方案似乎是增加.drop li {clear: both;}。

這指定一個元素是否可以在它之前的浮動元素旁邊，或者必須在它們下面向下移動（清除）。

clear屬性適用於浮動和非浮動元素。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

來源

2014-03-03 23:15:23 melc

菜單項不會彼此排列

回答

相關問題