CODEWITHSUNDEEP
phphtmlcsswordpressdrop-down-menu
Arturas Luksas
Arturas Luksas

Reputation: 13

after menu bar centering drop down menu dislocates

I'm working on old Wordpress page created with myMag theme, and i after centering menu to fill whole menu space, i have troubles with drop down menu. I'm new in CSS and maybe you could say where I did a mistake?

menu before:

enter image description here

menu after:

enter image description here

inspecting the drop down element shows this:

<ul class='children'>
    <li class="page_item page-item-187"><a href="http://xxx" title="Progetti di formazione">Progetti di formazione</a></li>
    <li class="page_item page-item-183"><a href="http://xxx" title="Progetti di mobilità">Progetti di mobilità</a></li>
    <li class="page_item page-item-185"><a href="http://XXX/" title="Progetti pilota">Progetti pilota</a></li>
    <li class="page_item page-item-168"><a href="http://xxx" title="Ricerche e studi">Ricerche e studi</a></li>
</ul>

the css looks like this:

#navcontainer #navbar {

float:left;

height: 51px;

line-height:50px;

margin-left: -15px;

margin-top: 1px;

}



#navbar, #navbar ul {

margin:0;

padding:0;
width:900px;
list-style-type:none;
 display: table;
position:relative;

line-height:50px; 

z-index:5;

}



#navcontainer #navbar a {

height: 40px;

display:block;

padding:0 21px;

text-decoration:none;

text-align:center;

line-height:28px; 

outline:none;

float: left;

z-index:35;

position:relative;

color: #FFF;

text-shadow:1px 1px 0 #515151;

font-weight: bold;
vertical-align: middle;

}



#navcontainer #navbar a:hover {

color: #CCC;



}



#navcontainer #navbar ul a {

line-height: 30px; 


}



#navcontainer #navbar li {

  z-index:20;
            text-align: center;
            display: table-cell;

font-size: 13px;
vertical-align: bottom;

}



#navcontainer #navbar li li {

border-left:none;

margin-top:0;

}



#navcontainer #navbar ul {

position:absolute;

display:none;

width:172px;

top:38px;

left:-1px;

background: #f5f5f5;

}



#navcontainer #navbar li ul a {

width:130px;

height:auto;

float:left;

text-align:left;

padding:0 21px;

color: #606060;

text-shadow: none;

}



#navcontainer #navbar ul ul {

top:auto;

}   



#navcontainer #navbar li ul ul {

left:172px;

top: 0px;

}



#navcontainer #navbar li ul ul a {

border-left:1px solid #CCC;

}



#navcontainer #navbar ul {

border-top:none;

}


#navcontainer #navbar ul a, #navcontainer #navbar ul li {

background-color:#e7e7e7;

}



#navcontainer #navbar ul a:hover, #navcontainer #navbar ul a:focus {

color: #18649a;

}




#navcontainer #navbar li:hover ul ul, #navcontainer #navbar li:hover ul ul ul,#navcontainer  #navbar li:hover ul ul ul ul {

display:none;   

}

#navcontainer #navbar li:hover ul, #navcontainer #navbar li li:hover ul, #navcontainer #navbar li li li:hover ul, #navcontainer #navbar li li li li:hover ul {

display:block;

}

and php file that creates this menu looks like this:

<div id="navcontainer">
    <div class="navigation">  
        <div class="wrapper"> 
            <ul id="navbar">
<?php $exclude = $myOptions['pages_excl'];?>
<?php if(!$myOptions['pages_limit']) {
$limit = '10'; } else {
$limit = $myOptions['pages_limit'];
}
if($myOptions['pages_limit'] == '0') {
$limit = 0;
}
?>
  <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
  <?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
            </ul> 
        </div>
    </div>
</div>

Upvotes: 0

Views: 50

Answers (1)

Jamie Paterson
Jamie Paterson

Reputation: 446

You will need to set

ul ul{
width: 100px;/*or whatever you want for the drop downs width*/
}
ul ul li {
display: block;
}

As there is a width set in just one UL of 900px you can overwrite to ensure constraint. Adding the display block to the LI's causes then to display on top of each other as they take full width of parent up.

Upvotes: 0

Related Questions