在CSS標題問題

Question

嗨:)在我的CSS我試圖保持標題內的導航欄標籤，使樣式更容易，但由於某種原因，標題鏈接顯示在標題的頂部以外的標題標記我的網站其餘部分的文本，這讓我覺得它沒有正確設置到標題標籤？

你能幫我弄清楚我可能會構成錯誤嗎？

感謝亞當:)

鏈接到當前版本視圖 http://jsfiddle.net/Binnsey/jadd06qm/

HTML

<header class="MainHeader"> 
    <img src="images/greenenergy.jpg" alt="Green energy logo" width="25%" height="25%" class="logo"/> 
    <h1 class="headertext"> My Green Energy</h1> 
    <nav> 
    <label for="show-menu" class="show-menu">Show Menu</label> 
    <input type="checkbox" id="show-menu" role="button"> 
     <ul id="menu"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">My Metre</a></li> 
      <li><a href="#">Customer Help</a></li> 
      <li><a href="#">Social Media</a></li> 
     </ul> 
</nav> 
</header> 

CSS3

body{ 
    margin: 0 auto; 
    width: 70%; 
    clear: both; 
    height: 100%; 
    background-color: #DCDCDC; 
    padding-top: 30px ; 
    margin: 0 auto; 
    padding-top: 30px ; 
    font-family: 'PT Sans', sans-serif; 
    font-size: 100%; 
    text-align: left; 
    line-height: 1.5; 
    padding:8px; 
    border-radius: 10px; 
    box-shadow: #0AF73A 0px 0px 50px; 
    margin-bottom:8px;} 

header { 
    margin-top: 2% 0; 
    background-color: #71B315; 
    padding-bottom: 60px;} 

.MainHeader img { 
    width: 20%; 
    height: auto;} 

.MainHeader { 
    padding-top: 20px ;} 

.logo { 
    display: inline; 
    vertical-align:middle} 

#menu .MainHeader nav a:hover, .MainHeader nav a:active 
#menu .MainHeader nav .active a:link, .Mainheader nav .active a:visited { 
    text-shadow: none;} 

#menu .MainHeader nav { 
    border-radius: 5px; 
    -webkit-border-radius: 5px;} 

.MainFooter { 
    background-color:#3D3D3D; 
    color:black; 
    clear:both; 
    text-align:center; 
    padding-bottom:10px; 
    padding-top:10px} 

.headertext { 
    display: inline;} 

.MainFooter a { 
    color: #FFFFFF; 
    text-decoration: none;} 

#headertext header {font-size:50%;} 

#menu nav li{display:inline-block;} 

/*Strip the ul of padding and list styling*/ 
#menu ul { 
    list-style-type:none; 
    margin:0 auto; 
    padding:0; 
    position: absolute;} 

/*Create a horizontal list with spacing*/ 
#menu li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
    padding: 5px 0px;} 

/*Style for menu links*/ 
#menu li a { 
    display:block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 

/*Hover state for top level links*/ 
#menu li:hover a { 
    background: #19c589;} 

/*Hover state for dropdown links*/ 
#menu li:hover ul a:hover { 
    background: #19c589; 
    color: #fff;} 

/*Prevent text wrapping*/ 
#menu li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px;} 

Answer 1

應用一個clearfix您header元素也像它會達到你的要求。

/* clearfix */ 
.clearfix:after { 
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

CodePen鏈接：http://codepen.io/ryanburnette/pen/bc6a625d46feae7904e86cb7c70b7a56

Answer 2

註釋掉浮動：在#menu黎族風情左線如下圖所示float類型的

#menu li { 
    display:inline-block; 
    /*float: left;*/ 
    margin-right: 1px; 
    padding: 5px 0px; 
} 

元素進不來的文檔流，因此不會被包含在父容器，除非父容器的高度等於子元素的高度。在這種情況下#menu li是一個浮動元素，從而流出<header>

小提琴環線：http://jsfiddle.net/8d9bq57L/