Question

我正在处理使用myMag主题创建的旧Wordpress页面，我在居中菜单填充整个菜单空间后，我有下拉菜单的麻烦。我是CSS的新手，也许你可以说我在哪里犯了错误？

之前的

菜单：

菜单之后：

检查下拉元素显示：

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

Answer 1

您需要设置

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

由于只有一个900px的UL设置宽度，您可以覆盖以确保约束。将显示块添加到LI会导致显示在彼此之上，因为它们占据了父级的全宽。

菜单栏居中后下拉菜单错位

1 个答案: