Question

我对编码仍然比较新，所以这可能很容易解决。我设置了菜单，其中包含5个菜单项和两个主菜单项下的子菜单项。如果我将第一个子菜单与其菜单项对齐，则第二个子菜单太右了。如果我将第二个子菜单与其菜单项对齐，则第一个子菜单太右了。有没有办法让两个子菜单在各自的菜单项下排成一行？

这是HTML：

<ul id="menu">
    <li><a href="http://kerryaltmantest.info">Home</a></li>
    <li><a href="http://kerryaltmantest.info/aboutme.html">About Me</a>
        <ul>
            <li><a href="http://kerryaltmantest.info/fpa.html">Fairfax Psychological Associates</a></li>
            <li><a href="http://kerryaltmantest.info/credentials.html">Credentials</a></li>
        </ul></li>
    <li><a href="http://kerryaltmantest.info/publications.html">Publications</a>
        <ul>
            <li><a href="http://kerryaltmantest.info/w5m.html">The Wisdom of the Five Messengers</a></li>
            <li><a href="http://kerryaltmantest.info/otherpublications.html">Other Publications</a></li>
        </ul></li>
    <li><a href="http://kerryaltmantest.info/location.html">Location</a></li>
    <li><a href="http://kerryaltmantest.info/strategicinteractions.html">Strategic Interactions</a></li>

这就是CSS：

    #menu {
width: 950px;
height:35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}

#menu li {
display: inline;
padding: 10px;
}

#menu a {
text-decoration: none;
color: #2B297F;
padding: 10px 10px 10px 10px;
}

#menu a:hover {
color: #2B297F;
background-color: #999;
}

#menu li ul
{font-size:15px;
margin-left:-160px;
margin-top:25px;
position:absolute;
text-align:left;
display:none;} 

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

#menu li li
{list-style:none; display:list-item;}

#menu li li a
{color:#2B297F; text-decoration:none;white-space:nowrap;
}

#menu li li a:hover
{color:#2B297F; background-color: #999 text-decoration:none;}

如果您想查看我对子菜单的含义，该网站位于http://kerryaltmantest.info。谢谢！

Answer 1

需要对css进行一些更改：

#menu li ul {
    font-size: 15px;
    /* margin-left: -160px; REMOVE */
    /* margin-top: 25px; REMOVE */
    position: absolute;
    text-align: left;
    top: 30px; /* add this */
    left: 0; /* add this */
    padding: 0 /* add this */
    display: none;
}

#menu li {
    display: inline;
    padding: 10px;
    position: relative; /* add this */
}

ul未正确定位的最大原因是因为其中包含的li没有设置位置样式。当发生这种情况时，绝对定位的元素根据具有位置类型集的第一祖先定位。此外，由于在top/left/bottom/right中未设置定位规则（ul），因此显然未生效。添加这两个内容并重置边距/填充可以解决问题（css可以在chrome＆＃t调试器中直接编辑/调试）。

https://developer.mozilla.org/en-US/docs/Web/CSS/position：

绝对定位

相对定位的元素仍然被认为是在   文档中元素的正常流动。相反，一个元素   绝对定位的是从流程中取出并因此占用   放置其他元素时没有空间。绝对定位   元素相对于最近定位的祖先定位。如果一个   定位的祖先不存在，使用初始容器。

Chrome调试信息：https://developer.chrome.com/devtools/index

使用菜单排列子菜单

1 个答案: