CSS，带有弹出LI元素的UL菜单，显示在上横幅上

Question

我正在尝试为我正在创建的网站创建一个基于CSS的菜单，而且没有太多运气。下面你可以看到一个图像，显示我想要实现的目标（整个菜单和标题在一个块中）：

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

下面的部分（在示例图像中以黄色显示）是包含正常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时，意图是它的高度得到增加，这样它就会增长到包含它的无序列表父项之外。在这样做时，它覆盖了父页面的钢蓝色区域，类似于示例图像中的亮紫色矩形。

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

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

我有些东西部分有效，这就是它目前的样子：

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

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

另外还有一个并发症。我对生成的标记几乎没有控制权，因为这是由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＆gt;之前解决了我的问题。

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