CSS: Bug lorsque la liste d'affichage horizontalement

Question

J'affiche avec succès une liste horizontale:

<div id="container"> 
     <div id="header">     
       <h:form> 
        <ul> 
         <li><a href="#">Peter</a></li> 
         <li> 
          <p:commandLink value="Profile" ajax="false" 
              actionListener="#{myBean.myProfile}"/> 
         </li>  
        </ul>      
       </h:form> 
     </div> 
</div> 
    <!-- 
    <div id="MainContainerPanel"> 
     <div id="LeftPanel" style="border: 2px solid gray; width: 190px; padding: 5px;"> 

     </div> 
     <div id="CenterPanel"> 

     </div> 
     <div id="RightPanel"> 

     </div> 
     <div id="adsPanel"/> 
    </div> 
    --> 

Cependant, si je le décommenter <div id="MainContainerPanel">, puis je me suis un bug bizarre. Peter est un lien hypertexte, mais je dois déplacer ma souris tout en haut de Peter pour pouvoir cliquer dessus. Veuillez cliquer sur ce lien pour voir de quoi je parle. Je capable de recréer le bug via ce sitehttp://jsfiddle.net/Tuvzj/21/

voici mon CSS

#header{ 
    height: 30px; 
    width: 100%; 
    padding: 0 10px; 
    vertical-align: middle; 
    display: table-cell; 
    color: gray; font-weight: bold;     
} 
#container{ 
    position: absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    border-bottom: 2px solid gray; 
} 
#header ul{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    list-style-image: none; 
} 

#header li{ 
    display: inline; 
    padding-right: 20px; 
} 
#MainContainerPanel 
{ 
    position:absolute; 
    top:10px; 
    left: 10px; 
    right:10px; 
    bottom:10px; 

    font-size: 12px/*{fsDefault}*/; 
} 
#LeftPanel 
{ 
    position:absolute;  
    left:0px; 
    top:60px; 
    height: 100%;   
} 
#CenterPanel 
{ 
    position:absolute; 
    left:240px; 
    width: 500px; 
    top:60px; 
    height: 100%; 
} 
#RightPanel 
{ 
    position:absolute; 
    left:780px; 
    top:60px; 
    height: 100%; 
    width:230px; 
    padding: 10px; 
    border: 2px solid gray; 
} 

Answer 1

Le problème est que #mainContainerPanel couvre le menu noms. Si vous ajoutez margin-top: 2em (ou toute valeur qui force le #mainContainerPanel suffisamment sur la page pour supprimer le chevauchement), le problème est résolu.