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

我正在尝试制作一个下拉菜单，但我一直在尝试在它的中心显示父链接下的下拉菜单

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

我得到的最好结果是使用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>

#nav li ul{边距：70px 0-75px；宽度：200px；位置：绝对；z索引：99；}

---

听起来好像您正试图构建一个带有次要链接的水平菜单，当您将鼠标悬停在主要链接上时，会出现次要链接

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

#nav>li{
边框：1px纯色灰色；
宽度：200px；
列表样式：无；
保证金：0；
填充：0px；
显示：内联块；
垂直对齐：顶部；
}
#导航>李>a{
显示：块；
背景颜色：浅灰色；
填充：10px；
}
#导航>li>ul{
显示：无；
}
#导航>垂直：悬停>垂直{
显示：块；
}

当您将鼠标移到主链接上时，可以看到辅助菜单

您可以在以下位置查看演示：

您可以对样式进行许多小的调整，但至少您可以演示一些基本概念