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

我正在尝试为我正在创建的网站创建一个基于CSS的菜单，但运气不太好。下面您可以看到一幅图像，显示我试图实现的目标（整个菜单和标题在一个块中）：

屏幕的上半部分在图像中以钢蓝色显示，其中包含一个带背景图像的div和一个标题标签，该标签位于Absolutey，用于将文本放置在图像顶部

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

如下所示：

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

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

我在HTML5中这样做，所以HTML5标记和CSS规则非常好

---

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

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

这里有一个关于堆栈溢出的首要问题

为什么?？当你在堆栈溢出上发布一个问题时，你通常会在很短的时间内自己解决它

无论如何，够了

我得到重叠的原因是因为我没有设置LI尺寸

只需添加以下规则：

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

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

在ul.root-nav li current>a解决我的问题之前，发送到我的手写纸

---

我的想法是正确的，因为绝对定位，UL的高度没有设置，但设置了一个固定的高度就成功了。

也许你可以删除你的问题。。还有你的答案。héhé。。但你是对的。。“当你在堆栈溢出上发布一个问题时，你通常会在很短的时间内自己解决它吗？”：-）这很疯狂，不是吗，我认为这一定与发布时的另一种思维过程有关，我发现我在撰写文章时的思维方式与我在编写代码时的思维方式不同。也许这个开关会下意识地触发一些事情，然后导致一个解决方案。我觉得这是一个很有意思的话题，需要花些时间来探讨。+1承认我们中的一些人在寻求帮助之前不会思考。6年后（2019年）回顾这个答案，我现在知道了为什么会发生这种情况。科学已经证明，通过自言自语解决一个问题，往往会引发你的下属走上你通常不会走的不同道路。实际上，有一种推荐的方法可以有效地使用它，现在被称为“橡皮鸭思维”，它的意思是，你的工作空间中有一些无生命的物体，你可以与之交谈并讲述你的问题。就我而言，这是一个“电视忍者”（Telerik Ninja）（：-）

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

.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;
}

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

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