帶有嵌套UL的垂直導航菜單水平顯示

我想要取一個ul，垂直顯示它，但是它的嵌套uls顯示在右側。帶有嵌套UL的垂直導航菜單水平顯示

扭曲：我已經做到了。它看起來像這樣：

但爲什麼是最後一個子菜單（弗克·艾根）默認情況下，如此狹窄？爲什麼它不能讓文本擴展而不包裝？我希望所有子菜單具有相同的寬度，並且像表格中的三個等距列一樣彼此相鄰 - 我該怎麼做？最好的辦法是以某種方式獲得.sub1的寬度並將它傳遞給.sub2，因爲calc（33％）似乎意味着「父寬度的33％」，它總是變小。

這是我當前的代碼 - 我已經包含了一些HTML，所以你可以看到菜單結構...

.sub1 { 
     width:calc(33%); position:relative;outline: 1px solid black; 
    } 
    .themenu li>a{ 
     display:block;background:#eee; 
    } 
    .sub1 ul { 
    } 
    .sub2{ 
     position:absolute; top:0px;left:180px; 
     outline: 1px solid black; 
    } 
    .sub3{ 
     position:absolute; top: 0px; left:120px; 
     outline: 1px solid black; 
    } 
    .themenu ul ul { 
     display: none; 
    } 

<ul class="sub1"> 
      <li><a href="#" title="Ausstellungen" >Ausstellungen</a> 
       <ul class="sub2"> 
        <li><a href="#" title="Aktuell" >Aktuell</a> 
         <ul class="sub3"> 
          <li><a href="#" title="Frauke Eigen" >Frauke Eigen</a></li> 
         </ul> 
        </li> 
        <li><a href="#" title="Vorschau" >Vorschau</a> 
         <ul class="sub3"> 
          <li><a href="#" title="Andrew Chiw" >Andrew Chiw</a></li> 
         </ul> 
        </li> 
        <li><a href="#" title="Archiv" >Archiv</a></li> 
       </ul> 
      </li> 
</ul>

來源

2014-02-24 user3266328

如果孩子在父母之外，你的HTML被設置的唯一方法是使他們與父母相同。要做到這一點，他們必須有'position：absolute' –

您要定義的整體容器.sub1爲33％，但還沒有定義還要別的嗎。所有如果孩子們要繼承那個寬度。在你的例子中看起來每次減少33％。特別是如果你的導航項目將是絕對的，你需要給他們一個寬度，否則UL將只填充其容器或父母的33％。希望有幫助

來源

2014-02-25 01:09:50 bilcker

我還應該爲.sub1定義什麼？ – user3266328

如何嘗試這樣的事情。我對它進行了測試，它看起來能夠實現您正在尋找的東西。你可能只需要使用寬度來適應你的風格。請讓我知道，如果有幫助。 .sub1 { 寬度：33％; \t \t margin-right：20px; \t \t提綱：1px純紅色; \t \t背景：#CCC; } .sub1 ul { \t \t float：right; \t \t概述：1px純黃色; \t \t背景：#CCC; } .sub2 { width：60％; } .sub3 { \t \t background：#FFF; \t \t寬度：50％; } – bilcker

帶有嵌套UL的垂直導航菜單水平顯示

回答

相關問題