Question

我创建了一个包含两个级别的纯css下拉菜单。第一级工作正常。但第二级，必须飞到母亲李的左边，出现在李的上方固定位置。请参考http://joomlaosw.oswebware.com/（菜单项“关于模板”）

正如你所观察到的那样，所有飞行的子菜单的位置都是固定的。我希望fly out子菜单与父li一致。 PS：我还不熟悉jQuery，这就是为什么我选择了纯粹的CSS菜单。

请给我你宝贵的建议。

这是我的第一个模板，所以任何改进我的工作的建议也会受到欢迎（除了主要问题）。提前致谢。 ANU

请注意，这只是代码的相关部分......你可以使用firebug进行检查，或者我会在需要时发送完整的代码......

html代码

    <ul class="menu ">
    <li class="item-101 current active"><a href="/">Home</a>
    </li>
    <li class="item-109 deeper parent"><a href="/">About Template</a>
        <ul>
            <li class="item-103 deeper parent"><a href="/index.php/2013-09-14-00-17-18/typography">Typography</a>
                <ul>
                    <li class="item-125"><a href="/">Sub Menu I</a>
                    </li>
                </ul>
            </li>
            <li class="item-112 deeper parent"><a href="/index.php/2013-09-14-00-17-18/module-positions">Module Positions</a>
                <ul>
                    <li class="item-126"><a href="/">Sub Menu II</a>
                    </li>
                </ul>
            </li>
            <li class="item-113 deeper parent"><a href="/index.php/2013-09-14-00-17-18/styles">Styles</a>
                <ul>
                    <li class="item-121"><a href="/index.php/2013-09-14-00-17-18/styles/blue">Blue</a>
                    </li>
                    <li class="item-123"><a href="/index.php/2013-09-14-00-17-18/styles/green">Green</a>
                    </li>
                    <li class="item-124"><a href="/index.php/2013-09-14-00-17-18/styles/black">Black</a>
                    </li>
                    <li class="item-122"><a href="/index.php/2013-09-14-00-17-18/styles/red">Red</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="item-110"><a href="/">Buy Now</a>
    </li>
    <li class="item-111"><a href="/">Contact Us</a>
    </li>
</ul>

CSS

    .menu {
    margin: 100px auto;
    text-align: center;
}
.menu ul {
    display: none !important;
}
.menu ul li:hover > ul {
    display: block;
}
.menu li:hover > ul {
    display: block !important;
    top: 20px;
    position: absolute;
    width: 150px;
}
.menu ul {
    background-color: #FFFFFF;
    padding: 0 20px;
    list-style: none;
    position: relative;
    display: inline-table;
    margin-top: -5px !important;
    z-index:3;
}
.menu ul li {
    float: left;
}
.menu ul li a {
    display: block;
    padding: 25px 40px;
    color: #757575;
    text-decoration: none;
}
.menu ul ul {
    padding: 0;
    position: relative;
    top: 0;
    left:100%;
}
.menu ul ul li {
    float: left;
    position: relative;
}
.menu ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
.deeper.parent ul li a {
    border: medium none !important;
    padding: 15px 0 0 !important;
    margin-top: -5px;
}

Answer 1

为你的菜单部分提供html代码和css。

纯粹的CSS子菜单在joomla飞出

1 个答案: