Search code examples
phphtmlcssjoomla

Drop Down Menu in CSS not working correctly

I've created a joomla template and the drop down menu is opening wrong. It's pushing my content down instead of going over my text.

My 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;
}

My index.php (auto generated by 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>
Solution

  • Change your CSS to this:

    .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;
}

    See fiddle here: http://jsfiddle.net/nezhhde4/1/

    EDIT (added explanation): When you have a nested element and you want to position it under the parent element horizontally, you have to position the parent element relative and the children absolute. This way the children top,left,right and bottom properties will refer to the relative parent's position. Also, since children elements are not relatively positioned, they will not move the other elements on the screen; they will be stacked over or under the other elements, based on their z-index value (that's why you need to specify the z-index: 100 value). Note that if there is an element on the screen with z-index higher than 100, it will be rendered above your navigation, so you will need to change this property accordingly.