2013-02-15 51 views
0

我正在一個菜單,工作正常,除了ie以外的每個瀏覽器。 有些東西有點奇怪,很快就完成了,但它除了ie以外還可以正常工作。 當移動到底部欄時,它會將顯示屏放回到無顯示,然後才能到達底部欄。 我有李和ul:懸停與顯示:塊,但我無法弄清楚如何解決這個問題。下拉式拆解時移動到它(導航ie)(純CSS)

我已經把導航的小提琴: http://jsfiddle.net/vUxpE/22/

一切到目前爲止,我已經試過沒有工作。我現在還不知道爲什麼。也許你們可以穿上它

CSS淡淡的道:

#nav { 
    height:64px; 
    width:100%; 
    background:#f0f0f0; 
    background: -moz-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0f0f0), color-stop(100%, #d3d5d2)); 
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -o-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: -ms-linear-gradient(top, #f0f0f0 0%, #d3d5d2 100%); 
    background: linear-gradient(to bottom, #f0f0f0 0%, #d3d5d2 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d3d5d2', GradientType=0); 
    border:#e2e2e2 1px solid; 
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 1); 
} 
#nav ul { 
    padding:10px; 
} 
#nav li { 
    float:left; 
} 
#nav a { 
    color:#4d4d4d; 
    font-size:14px; 
    text-decoration:none; 
    margin-top:10px; 
    padding:10px; 
    padding-bottom:11px; 
    line-height:44px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav a:hover { 
    background:url(../images/navbutton.png); 
    color:#fff; 
} 
#navtest li ul { 
    display:none; 
    z-index:100; 
    position:absolute; 
    margin:0; 
    padding:20px; 
    left:0; 
    width:494px; 
} 
#navtest li:hover ul { 
    display:block; 
} 
#navtest li ul:hover { 
    display:block; 
} 
#navtest li ul a { 
    color:#FFF; 
    font-size:11px; 
} 
#navtest li ul a:hover { 
    background:none; 
    text-decoration:underline; 
} 
.subnav { 
    background:url(../images/submenu.png) #000; 
    height:64px; 
    z-index:10; 
} 
.subnav li { 
    float:left; 
    margin:15px; 
} 
.subnav a { 
    color:#fff; 
    line-height:34px; 
    text-decoration:none; 
} 
.subnav a:hover { 
    text-decoration:underline; 
} 

HTML:

<nav id="nav"> 
    <ul id="navtest"> 
     <li> <a href="#">News</a> 

       <ul> 
        <li> <a href="#">Latest</a> 

        </li> 
        <li> <a href="#">Archive</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Tournaments</a> 
       <ul> 
        <li> <a href="#">DSCL</a> 

        </li> 
        <li> <a href="#">Starcraft 2</a> 

        </li> 
        <li> <a href="#">League of Legends</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Media</a> 

       <ul> 
        <li> <a href="#">Photo's</a> 

        </li> 
        <li> <a href="#">Video's</a> 

        </li> 
        <li> <a href="#">Extra</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">Partners</a> 

       <ul> 
        <li> <a href="#">DSCL</a> 

        </li> 
        <li> <a href="#">Knights</a> 

        </li> 
       </ul> 
     </li> 
     <li> <a href="#">About Us</a> 

     </li> 
     <li> <a href="#">Contact</a> 

     </li> 
    </ul> 
</nav> 
<div class="subnav"></div> 

回答

0

喜請刪除最後subnav的div

,改變#navtest李UL和嘗試這個

#navtest li ul { 
background: none repeat scroll 0 0 #000; 
display: none; 
left: 0; 
margin: 0; 
padding: 20px; 
position: absolute; 
top: 67px; 
width: 520px; 
z-index: 100; 

}

+0

這仍然會導致在Internet Explorer中的下拉菜單解散。還有subnav div是爲了背景和搜索框會出現在那裏,所以刪除它不是可選的。 – GeNyaa 2013-02-15 05:13:14