简单下拉菜单中的子菜单位置

Question

假设我们有一个简单的 HTML 嵌套菜单：

<ul id="top-menu">
 <li>something
  <ul>
   <li>somethingelse1</li>
   <li>somethingelse2</li>
  </ul>
 </li>
 <li> ... etc.

同样简单的 CSS 允许您在将光标移动到任何位置时显示子菜单：

    #top-menu ul {
        display: none;
    }

    #top-menu li:hover > ul {
        display: block;
    }

    #top-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
    }

    #top-menu > li {
        position: relative;
        padding: 10px;
        cursor: pointer;
    }

    #top-menu > li > ul {
        position: absolute;
        top: 0;
        left: 25%;
        list-style: none;
        background-color: #fff;
        padding: 0;
        margin: 0;
        z-index: 1000;
        min-width: 150px;
    }

    #top-menu > li > ul > li {
        padding: 10px;
        background-color: #ffffff;
        cursor: pointer;
    }

    #top-menu > li > ul > li > ul {
        position: absolute;
        top: 0;
        left: 25%;
        list-style: none;
        background-color: #fff;
        padding: 0;
        margin: 0;
        z-index: 1000;
    }

上面的代码产生与此类似的结果（我将光标放在“Caps”上）：

如您所见，当我选择“Caps”项时，第一个子菜单项与父项高度相同。 我需要在代码中修复什么，以便无论我选择主菜单上的哪个项目，第一个子菜单项与主菜单上的第一个项目的高度相同？

Answer 1

要解决此问题，您可以从

position: relative

 中删除 

#top-menu > li
从这段代码来看：

    #top-menu > li {
        position: relative; /* remove this line */
        padding: 10px;
        cursor: pointer;
    }

这段代码：

    #top-menu > li {
        padding: 10px;
        cursor: pointer;
    }