0

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

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

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

4

1 回答 1

0

听起来您正在尝试构建一个带有辅助链接的水平菜单，当您将鼠标悬停在主链接上时会出现这些辅助链接。

作为一个基本示例，您可以从以下 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/

你可以对样式做很多细微的调整，但至少你有一些东西可以展示基本概念。

于 2013-08-21T00:35:41.060 回答