如何防止链接在CSS megamenu div中换行（继承问题）

我正在尝试创建一个megamenu（请参阅fiddle:），但我遇到的问题是当我在菜单中添加从菜单中飞出的链接时。菜单1下的下拉菜单是我希望它看起来像什么，但一旦我把文本变成链接，如菜单2所示，所有的格式都乱了套。我认为问题在于链接继承了属性，但我不知道防止这种情况发生的最佳方法

基本上，我希望根据内容，宽度尽可能小。节文本应在一行上。各小节项都应位于各自的行中，每个小节文本（但不是逗号）作为链接。同样，基本上与菜单1的外观完全相同

我还试着把这些子条目改成一个无序的列表，但这变得更加复杂，我认为没有必要这样做

有人能帮我弄清楚是什么东西继承了第二行中的所有文本，以及如何防止它发生吗？谢谢

HTML代码如下：

<ul id="menu">
  <li> <a href="#">Menu 1</a>
    <div class="dropdown">
      <div class="section">Section goes here</div>
      <div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
      <div class="rule"></div>
    </div>
  </li>
  <li> <a href="#">Menu 2</a>
    <div class="dropdown">
      <div class="section"><a href="#">Section goes here</a></div>
      <div class="subsection"><a href="#">Subsection 1</a>, <a href="#">Subsection 2</a>, <a href="#">Subsection 3</a></div>
      <div class="rule"></div>
    </div>
  </li>
</ul>

---

这一行导致了您的问题：

#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}

这将使列表项的子项的任何和所有链接显示为块，从而导致您看到的垂直堆叠

---

将该选择器更改为

#menu li>a

，您就可以开始了。这只会将样式应用于列表项的直接子项链接。

这确实符合我的需要。我不知道我以前怎么可能没有碰到那个选择器。非常感谢！

#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}