Question

我正在尝试制作一个下拉菜单，而我却试图在其中心显示父链接下方的下拉菜单。

我希望下拉框与顶部元素/父元素/下拉菜单上方链接的中间位置相同。

我得到的最好的是使用CSS边距来估计中心，但这似乎是一个坏主意。

也许CSS解决方案比jQuery解决方案更好，但我会考虑。

这是我的标题导航菜单：

<style>
    #nav li ul { margin:70px 0 0 -75px; width: 200px; position: absolute; z-index:99; }
</style>

<ul id="nav">
    <li><a href="#" class="mitem mhome" title="">home</a></li>
    <li><a href="#" class="mitem mshop" title="">shop</a>
        <ul class="child">
            <li class="mheader"></li>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a></li>
            <li><a href="#">Random Equipment</a></li>
        </ul>            
    </li>
    <li><a href="#" class="mitem mdespre" title="">despre noi</a>
        <ul class="child">
            <li class="mheader"></li>
            <li><a href="#">Hard Drives</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Speakers</a></li>
            <li><a href="#">Random Equipment</a></li>
        </ul>             
    </li>

Answer 1

听起来您正在尝试使用在主要链接上悬停时显示的辅助链接构建水平菜单。

作为一个基本示例，您可以从以下CSS开始：

#nav > li {
    border: 1px solid gray;
    width: 200px;
    list-style: none;
    margin: 0;
    padding: 0px;
    display: inline-block;
    vertical-align: top;
}
#nav > li > a {
    display: block;
    background-color: lightgray;
    padding: 10px;
}
#nav > li > ul {
    display: none;
}
#nav > li:hover > ul {
    display: block;
}

将鼠标悬停在主链接上时，您可以看到辅助菜单。

您可以在http://jsfiddle.net/audetwebdesign/BrL3G/

看到该演示

你可以对造型进行很多微调，但至少你有一些东西可以展示基本概念。

jQuery或CSS - 基于另一个div的中心来居中浮动div

1 个答案: