2016-01-26 11 views
0

Я работаю над старой страницей Wordpress, созданной с помощью темы myMag, и я после центрирования меню, чтобы заполнить все пространство меню, у меня проблемы с выпадающим меню. Я новичок в CSS и, может быть, вы могли бы сказать, где я ошибся?после выпадающего меню в центре выпадающего меню

меню перед:

enter image description here

меню после того, как:

enter image description here

проверки выпадающий элемент показывает это:

<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> 

CSS-код выглядит следующим образом:

#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; 

} 

и PHP-файл, который создает это меню выглядит следующим образом:

<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> 
+0

Вы могли бы предоставить jsfiddle? – FKutsche

+0

К сожалению, причина выглядит так, что выпадающий файл создается темой WP, и я даже не могу получить PHP-код, который его создает. – user3641915

+0

вам нужно больше HTML, у вас есть раскрывающаяся часть, но не родительские элементы. – David

ответ

0

Вам нужно будет установить

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

Как есть ширина устанавливается только в одном UL из 900px вы может перезаписать, чтобы обеспечить ограничение. Добавление блока отображения к причинам LI затем отображается друг над другом, когда они принимают полную ширину родительского элемента вверх.

Смежные вопросы