0

我正在尝试创建一个 megamenu（参见小提琴： http: //jsfiddle.net/BKHNk/），但我遇到的问题是当我将链接放在从菜单中飞出的 <div> 中时。菜单 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>

下面的CSS：

#menu {
  font-family: sans-serif;
  list-style:none;
  height: 32px;
  width: 200px;
  background: #888;
}
#menu li {
  float:left;
  display:block;
  text-align:center;
  position:relative;
  padding: 5px;
  margin:5px;
}
#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}
#menu li:hover a {
  color:#ccc;
}
.dropdown {
  margin:4px auto;
  float:left;
  position:absolute;
  left:-999px;
  text-align:left;
  padding:10px;
  background:#aaa;
  width: auto;
  white-space:nowrap;
}
#menu li:hover .dropdown {
  left:0px;
  top:auto;
}
.rule {
  height: 2px;
  width: 100%;
  background-color: red;
}
.section {
  font-weight:bold;
}
.subsection {
font-size: 75%;
}
4

1 回答 1

1

此行导致您的问题：

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

这使得作为列表项的子项的所有链接都显示为块，这会导致您看到的垂直堆叠。

将该选择器更改为#menu li > a，您就可以开始了。在 JSFiddle 上查看。这样做只是将样式应用于作为列表项的直接子项的链接。

于 2013-01-08T01:12:44.640 回答