我的頭部菜單有一個IE佈局問題，它在所有其他瀏覽器中工作正常。

Question

這是我從頭創建的joomla模板。

它有一些PHP，像joomla中的所有東西，但請在您的答案中使用CSS和HTML，因爲PHP不是我的強大技能之一。

問題是主菜單。

在所有其他瀏覽器中，標題中的三個元素將菜單推出標題div，並將其放在我希望的底部邊界的下方。

我的標題高度在自動。我不想讓它修復，我不想使用定位。

我想把它放在標題下。

ul li是由joomla動態創建的，我使用的是rtl方向。

此圖像顯示了IE問題

而且這個形象是我怎麼想它

http://www.flickr.com/photos/60188007@N07/5493611091/

#wrap 
    { 
     margin:0 auto; 
     width:100%; 
     height:auto; 
     background-color:#540501;   
     min-width:1100px;  

    } 

    #headr 
    { 
     margin:0 auto; 
     width:99%; 
     height:106px; 
     min-width:1000px; 
     background-color:#2c0300; 
     border-top:1px solid white;   
     border-bottom:1px solid white; 
     border-left:2px solid white; 
     border-right:2px solid white; 
     -moz-border-radius: 20px;  
    -webkit-border-radius: 20px;   
    border-radius:20px; 
    direction:rtl; 
    } 

    #logo 
    { 
     margin:0 150px; 

    } 
    #bunner 
    { 
     float:right; 
     height:60px; 
     z-index:0; 
    } 

/**************************************************************************** 
    Maine Menu 
****************************************************************************/ 


    #maineMenu 
    { 
     width:73%; 
     height:auto; 
     min-width:900px; 
     z-index:11; 
     clear:both; 

    } 

    #maineMenu ul 
    { 
     list-style-type:none; 
     margin:0 auto ; 
     border:none; 
    } 

    #maineMenu ul li 
    { 
     margin:0 1px 0 0; 
     min-width:114px; 
     height:38px; 
     float:left; 
     text-align:center; 
     line-height:37px;    
     -webkit-transition: all 0.2s ease-out;  
    } 


    #maineMenu ul li a 
    { 
     text-decoration:none; 
     color:White; 
     font-size:1.2em; 
     border:none;  
     display:block; 

    }   

    #maineMenu ul li a span 
    { 
     padding:0 6px; 
     border:none;  
     display:block; 
     background-image:url("../images/buttonTopOnCenter.png"); 
     background-repeat: repeat-x; 
     background-position:top; 
     -moz-border-radius:0 0 10px 10px; 
    -webkit-border-radius:0 0 10px 10px; 
    -o-border-radius:0 0 10px 10px; 
    border-radius:0 0 10px 10px; 
    } 

/************************************************************************************* 
     Menu Hover 
*************************************************************************************/ 

    #maineMenu ul li:hover 
    {    
     background-color:#b9c119    
     background-repeat:no-repeat;    
     position: relative; top: -2px; left: -2px; 
    } 

    #maineMenu ul li a:hover 
    { 
     text-decoration:none; 
     color:White; 
     font-size:1.2em; 
     border:none;  
     display:block; 
     background-color:#b9c119;   
     background-repeat:no-repeat; 
     background-position:top right; 
     position: relative; top: -1px; left: -1px; 
    } 

    #maineMenu ul li a span:hover 
    { 
     padding:0 6px; 
     border:none;  
     display:block; 
     background-repeat: repeat-x;    
     background-image:url("../images/buttonTopCenter.png"); 
     -moz-box-shadow: 3px 3px 5px #2C0300; 
    -webkit-box-shadow: 5px 5px 5px #2C0300; 
    box-shadow: 5px 5px 5px #2C0300;  
    position: relative; top: -1px; left: -1px; 


    } 



<div id="wrap"> 
    <div id="headr"> 
     <div id="logo"> 
      <jdoc:include type="modules" name="logo" style="xhtml"/> 
     </div> 
     <div id="topMenu"> 
      <jdoc:include type="modules" name="topMenu" style="xhtml"/>      
     </div> 
     <div id="bunner"> 
      <jdoc:include type="modules" name="banner" style="xhtml"/> 
     </div>  


     <div id="maineMenu"> 
      <jdoc:include type="modules" name="menu" style="xhtml"/> 
     </div> 
    </div> 
</div> 

Answer 1

IE瀏覽器有一些問題與z-index: 0;嘗試從z-index: 1;開始，

#bunner 
{ 
    float:right; 
    height:60px; 
    z-index:1; /*change 0 to 1*/ 
}