after menu bar centering drop down menu dislocates - php

Question

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:
menu after:
inspecting the drop down element shows this:
<ul class='children'>
<li class="page_item page-item-187">Progetti di formazione</li>
<li class="page_item page-item-183">Progetti di mobilità</li>
<li class="page_item page-item-185">Progetti pilota</li>
<li class="page_item page-item-168">Ricerche e studi</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>Home</li>
<?php wp_list_pages("exclude=$exclude&title_li=&depth=3&number=$limit");?>
</ul>
</div>
</div>
</div>

Answer 1

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.