2

我正在尝试为我正在创建的网站创建一个基于 CSS 的菜单，但运气不佳。您可以在下面看到一张图片，该图片显示了我想要实现的目标（整个菜单和标题都在一个块中）：

菜单布局示例

屏幕的上半部分在图像中以钢蓝色显示，其中包含一个带有背景图像的 div，以及一个绝对定位的标题，用于将文本放在图像的顶部。

下面的部分，在示例图像中以淡黄色显示，是一个标准的无序列表元素，包含正常的 li 列表标签。

类似于以下内容：

<ul>
  <li>Home</li>
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
</ul>

无序列表父容器中的每个列表元素都将包含一个锚标记，如下所示：

<ul>
  <li><a href="home">Home</a></li>
  <li><a href="page1">Page 1</a></li>
  <li><a href="page2">Page 2</a></li>
  <li><a href="page3">Page 3</a></li>
</ul>

当包含锚点的列表项具有与正在查看的实际页面匹配的 href 时，其目的是增加它的高度，以便它在包含它的无序列表父级之外增长。在这样做时，它覆盖了父页面的钢蓝色区域，类似于示例图像中的亮紫色矩形。

未匹配且未悬停的列表项（在示例图像中显示为蓝色矩形）应保留在父无序列表内，并具有其默认背景样式和颜色。

当列表项悬停时，它应该更改为与页面匹配的样式相同的样式，高度明智，并且在父列表之外，但它应该采用不同的颜色来显示它已悬停并且不匹配，它应该在悬停完成后返回到之前的状态（蓝色矩形）。

我有点让事情部分工作，这就是它目前的样子：

当前工作的菜单

如您所见，实际的无序列表元素不会向下流动，并且其中的每个列表项相互重叠，我怀疑这是因为我将每个列表项设置为绝对定位。

如果我更改列表项以使其使用相对定位，则可以解决重叠问题，但这会阻止列表项弹出父列表元素的顶部并覆盖图像的钢蓝色部分。

还有另一种并发症。我对生成的标记几乎没有控制权，因为这是由 CMS（确切地说是 mojoPortal）生成的。目前由 ASP.NET 生成的标记如下：

<nav class="span12" id="ctl00_SiteMenu1_ctl00">
  <ul id="ctl00_SiteMenu1_ctl00_UL" class="root-nav">
    <li class="current">
  <a href="/home.aspx">Home</a>
    </li>
<li>
      <a href="/contact-us.aspx">Contact Us</a>
    </li>
<li>
      <a href="/new-page.aspx">Frogs</a>
    </li>
  </ul>
</nav>

我知道这些类root-nav和current在其他地方定义，并且我确实有能力覆盖我自己的任何现有的任何 CSS 规则。

上面的例子有重叠，这个定义如下：

.mainhead
{
  background: url(img/menu-banner.png);
  height: 170px;
}

ul.root-nav
{
  background: #B3A90E;
  border-radius: 0px;
  z-index: 1000;
  position: relative;
  width: 1170px;
}

ul.root-nav li.current > a
{
  background-color: #B30D9E;
  background-image: none;
  height: 100px;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
  display: block;
}

ul.root-nav li > a
{
  background-color: #1C10B3;
  background-image: none;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
}

ul.root-nav li > a:hover
{
  background-color: #0BB312;
  background-image: none;
  height: 100px;
  z-index: 1010;
  position: absolute;
  bottom: -30px;
  border-radius: 25px 25px 0px 0px;
  width: 100px;
}

我想让这个与覆盖一起工作，而不是我的替代方案，即使黄色区域成为我期望任何弹出项目的最大高度并将其固定到位，以便在高度变化时不会移动。

我在 HTML5 中执行此操作，因此 HTML5 标记和 CSS 规则非常好。

提前感谢任何人提出的任何想法。

4

1 回答 1

1

大约一个小时后……我回来了。

这绝对应该是堆栈溢出的首要问题......

为什么？当您发布有关堆栈溢出的问题时，您通常最终会在很短的时间内自行解决。

总之，够了。

我得到上面重叠的原因是因为我没有设置 LI 大小。

只需添加以下规则：

ul.root-nav li.current
{
  min-width: 100px;
}

ul.root-nav li
{
  min-width: 100px;
}

到我的样式表，就在ul.root-nav li-current > a解决了我的问题之前。

由于绝对定位，我对没有为 UL 设置高度的想法是正确的，但是设置一个固定的高度就可以了。

于 2013-02-06T20:24:38.197 回答