带有弹出式 LI 元素的 CSS、UL 菜单出现在上方横幅上

Question

我正在尝试为我正在创建的网站创建一个基于 CSS 的菜单，但不太顺利。下面你可以看到一张图片，它显示了我正在努力实现的目标(整个菜单和标题都在一个 block 中):

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

在示例图像中以淡黄色显示的下方部分是包含普通 li 列表标签的标准无序列表元素。

类似下面的内容:

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

无序列表父容器中的每个列表元素都将包含一个 anchor 标记:

<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>

当包含 anchor 的列表项具有与正在查看的实际页面相匹配的 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 规则非常合适。

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

Answer 1

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

这里有一些绝对应该成为堆栈溢出问题的首要问题......

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

不管怎样，够了。

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

只需添加以下规则:

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

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

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

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