背景色の問題この</p> <p><a href="http://jsfiddle.net/esTzk/" rel="nofollow">http://jsfiddle.net/esTzk/</a></p> <p>のドロップダウンメニューで

Question

ルック私の＃ヘッダーの色は適用されませんどのように来ますか？

Answer 1

オーバーフローを隠すか隠すと、オーバーフローが発生します。どちらの場合もこの場合に動作します。

#header{ 
    background:#2b2b2b; 
    color:#fff; 
    width:100%; 
    height:200px; /* overrides float calculations */ 
    overflow:hidden; /* clears floats */ 
} 

http://jsfiddle.net/AlienWebguy/esTzk/1/

Answer 2

あなたはそれがとにかく一定値よりも大きくなりたくないので、あなたのヘッダーの高さを与える：

#header{ 
    background-color:#2b2b2b; 
    color:#fff 
    width:100%; 
    height:20px; 
} 

より良い解決策は、両方の明確でdiv要素を移動することですヘッダーの内側。

<div id="header"> 
    <ul id="nav"> 
    <li>Service Provider 
     <ul> 
     <li>Vendor/Manufacturer</li> 
     <li>Service Type</li> 
     <li>Service Technician</li> 
     </ul> 
     <div style="clear:both"></div> 
    </li> 
    <li>Cities & Stations 
     <ul> 
     <li>Stations</li> 
     <li>Station Owner</li> 
     </ul> 
     <div style="clear:both"></div> 
    </li> 
    <li>Firefighter</li> 
    <li>PPE Management</li> 
    <li>Care & Maintenance</li> 
    <li><a href="index.php?logout=yes">Logout</a></li> 
    </ul> 
    <div style="clear:both"></div> 
</div> 

Answer 3

ちょうどあなたの知識を追加して、それがためにフロートである：#nav李セレクタに左。 #header div内の要素はフローティングされているため、#header divはheight = 0に設定されます。そのため、高さを指定したり、浮動小数点をクリアする前に、背景色を表示しないのはこのためです。