为什么<li>(具有相对位置)自动大小内的<ul>(具有绝对位置)？

Question

编辑:另见下面我自己的答案(2016)

---

例如:

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

然后风格:

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display:inline-block;
}

#main-menu > ul > li ul li{
    float:left;
    display:block;
    list-style:none;
}

好.所以,我有主菜单,显示水平.我还希望子菜单显示水平.但由于某种原因,ul框不会调整大小以达到总li标签宽度,因此它保持垂直.父亲ul不会遇到这个问题.我可以通过简单地为孩子ul添加适当的宽度来使其工作,但这不是我想要使用的方式.

任何的想法？

Answer 1

有一件愚蠢的事情：在子菜单上，您可以通过简单地在内部项目上强制使用空白：不换行来强制总菜单为内部项目宽度。无论您使用任何技术或布局，它都可以工作 -主要 LI 项目具有显示：内联块或现代 Flex 布局 // 对于潜艇，常规显示无/块或现代 css3 fx 解决方案- 这并不重要。一个原始的例子就是这样，在这种情况下，使用 Flexbox 和淡入/淡出效果作为低音炮（但也可以是更简单的无 Flexbox 或更旧的，这并不重要）：

.main-menu{ // ul
  display: flex;
  flex-wrap: nowrap;

  > li{
    display: inline-block;
    flex: 1;
    position: relative;

    &:hover{
      .sub-menu{
        visibility: visible;
        opacity: 1;
        transition: opacity 200ms linear;
      }
    }

    .sub-menu{
      display: inline-block;
      position: absolute;
      top: 50px;
      left:0;

      visibility: hidden;
      opacity: 0;
      transition: visibility 0s 200ms, opacity 200ms linear;

      li{
        a{
          white-space: nowrap; // <<< THIS IS THE KEY!
        }
      }
    } // sub-menu

  } // > li
}