带有嵌套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的垂直导航菜单水平显示

回答

相关问题