CSS 中的下拉菜单无法正常工作

Question

我创建了一个 joomla 模板，但下拉菜单打开错误。它把我的内容往下推，而不是遍历我的文本。

我的CSS：

.main_menu
{
    margin-top: 0px;
    margin-bottom: 10px;    
    text-align: center;
}
.main_menu ul
{
    margin: 0px;
    list-style: none;   
    display: inline-block;
}
.main_menu li
{
    margin-right: 5px;  
    width: 100px;   
    text-align: center; 
    display: inline-block;  
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 1px solid #000000;
}

.nav-child li
{
    display: none;
}

.main_menu ul:hover .nav-child li
{
    display: inline-block;
}

我的index.php（由joomla自动生成）：

<div class="main_menu">
                    <div class="moduletable_menu">
                        <ul class="nav menu">
<li class="item-101 current active"><a href="/index.php" >Home</a></li><li class="item-105"><a href="/index.php/project" >Project</a></li><li class="item-103 deeper parent"><a href="/index.php/partners" >Partners</a><ul class="nav-child unstyled small"><li class="item-111"><a href="/index.php/partners/czech-republic" >Czech Republic</a></li><li class="item-109"><a href="/index.php/partners/belgium" >Belgium</a></li><li class="item-113"><a href="/index.php/partners/germany" >Germany</a></li><li class="item-112"><a href="/index.php/partners/iceland" >Iceland</a></li><li class="item-110"><a href="/index.php/partners/norway" >Norway</a></li></ul></li><li class="item-102 deeper parent"><a href="/index.php/meetings" >Meetings</a><ul class="nav-child unstyled small"><li class="item-114"><a href="/index.php/meetings/10-14-09-2014-czech-republic" >10. - 14.09.2014 Czech Republic</a></li><li class="item-115"><a href="/index.php/meetings/11-13-12-2014-belgium" >11. - 13.12.2014 Belgium</a></li><li class="item-116"><a href="/index.php/meetings/19-21-03-2015-germany" >19. - 21.03.2015 Germany</a></li><li class="item-117"><a href="/index.php/meetings/25-08-31-08-2015-iceland" >25.08 - 31.08.2015 Iceland</a></li><li class="item-118"><a href="/index.php/meetings/26-28-11-2015-czech-republic" >26. - 28.11.2015 Czech Republic</a></li><li class="item-119"><a href="/index.php/meetings/10-13-03-2016-norway" >10. - 13.03.2016 Norway</a></li><li class="item-120"><a href="/index.php/meetings/22-29-05-2016-belgium" >22. - 29.05.2016 Belgium</a></li></ul></li><li class="item-106"><a href="/index.php/activities" >Activities</a></li><li class="item-107"><a href="/index.php/press" >Press</a></li><li class="item-104"><a href="/index.php/downloads" >Downloads</a></li><li class="item-108"><a href="/index.php/contacts" >Contacts</a></li></ul>
        </div>

Answer 1

试试这个

.main_menu ul.nav-child
{
    display: none;
    position:absolute;
    top:20px;
    left:0;
    padding:0;
}

工作链接

Answer 2

将 CSS 更改为：

.main_menu {
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
}
.main_menu ul {
    margin: 0px;
    list-style: none;
    display: inline-block;
}
.main_menu li {
    position: relative;
    margin-right: 5px;
    width: 100px;
    display: inline-block;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 1px solid #000000;
}
.main_menu  li .nav-child {
    position: absolute;
    top: 1em;
    left: 0;
    margin-left: 0;
    padding: 10px 0 0;
    display: none;
}

.main_menu  li:hover .nav-child {
    display: inline-block;
    z-index: 100;
}
/* This block is not needed, it's just for styling */
.main_menu li .nav-child li {
    background: white;
    margin: 2px 0;
    box-shadow: 0 0 7px -3px;
}

请参阅此处的小提琴：http://jsfiddle.net/nezhhde4/1/

编辑（添加解释）： 当您有一个嵌套元素并且想要将其水平定位在父元素下方时，必须将父元素相对定位，将子元素绝对定位。这样，子级

top

、

left

、

right

和

bottom

属性将引用相对父级的位置。另外，由于子元素没有相对定位，因此它们不会移动屏幕上的其他元素；它们将根据其 z-index 值堆叠在其他元素之上或之下（这就是您需要指定 z-index: 100 值的原因）。请注意，如果屏幕上有一个 z-index 高于 100 的元素，它将呈现在导航上方，因此您需要相应地更改此属性。

Answer 3

添加此：

.main_menu{
    position: absolute;
    top: 10px;
    width: 100%;
    margin: 0 auto;
}

.content{
    margin-top:30px;
}

这应该使您的菜单位于顶部中心。