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