WordPress導航菜單溢出

Question

我正在開發一個WordPress主題，但導航菜單項溢出了內容。

因此，當我調整它的大小或在菜單中添加新項目時，它們似乎超出了標題範圍。

下面我添加了代碼和截圖。

<header class="site-header"> 
     <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> 
     <h5><?php bloginfo('description'); ?></h5> 

     <nav class="site-nav"> 
      <?php 
      $args = $args = array('theme_location' => 'primary',); 
      ?> 
      <?php wp_nav_menu($args);?> 
     </nav> 
    </header> 


/* Navigation */ 

    .site-nav ul{ 
    padding: 0; 
    margin-bottom: 50px; 
} 
.site-nav ul:before, site-nav ul:after{content: ""; display: table;} 
.site-nav ul:after {clear: both;} 
.site-nav ul{*zoom: 1;} 

.site-nav ul li{ 
    list-style: none; 
    float: left; 
} 

/* Site header menu */ 
.site-header nav ul li{ 
    margin-right: 5px; 
} 

.site-header nav ul li a:link, 
.site-header nav ul li a:visited{ 
    display: block; 
    padding: 10px 18px; 
    border: 1px solid #892ae1; 
    text-decoration: none; 
} 
.site-header nav ul li a:hover{ 
    background-color: #ECECEC; 
} 
.site-header nav ul li.current-menu-item a:link, 
.site-header nav ul li.current-menu-item a:visited{ 
    background-color: #006ec3; 
    color: #fff; 
} 

下面是它的截圖。 Click to view screenshot

Answer 1

這是因爲float：left;我認爲。 請嘗試在您的CSS中使用下面的代碼;

.site-header:after{ 
    content:""; 
    display:block; 
    clear:both; 
}