0
我試圖創建一個相當簡單的響應下拉菜單。在Chrome和Firefox中都很好看，但是在IE中（10和更低），菜單在某個點上正在消失。IE - 消失導航
我不能完全弄清楚這一點我相信這是當窗口被調整大小時與我的jQuery有關。
我創建了一個JSFiddle，但不能測試它，因爲我的IE10崩潰了。
這裏是我的代碼：
HTML
<header>
<nav> <div class="menu-primary-navigation-container"><ul id="menu-primary-navigation" class="menu" style="display: block;"><li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-6"><a href="http://kodeable.com/wp/">Home</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href="http://kodeable.com/wp/category/tutorials/">Tutorials</a>
<ul class="sub-menu">
<li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="http://kodeable.com/wp/category/tutorials/css3/">CSS3</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="http://kodeable.com/wp/category/tutorials/html5/">HTML5</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="http://kodeable.com/wp/category/tutorials/jquery/">jQuery</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="http://kodeable.com/wp/category/tutorials/php/">PHP</a></li></ul></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://kodeable.com/wp/contribute/">Contribute</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://kodeable.com/wp/about/">About</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://kodeable.com/wp/contact/">Contact</a></li></ul></div><ul id="user-info"><li>Hey, Name</li>
<li> <img alt="Avatar" src="http://1.gravatar.com/avatar/90391e1d82af6445f9af05ba5495da59?s=48&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D48&r=G" class="avatar avatar-48 photo" height="48" width="48"> </li>
<li>
<a href="http://kodeable.com/wp/wp-login.php?action=logout&redirect_to=http%3A%2F%2Fkodeable.com%2Fwp%2Fhtml-and-css-for-beginners-part-i%2F&_wpnonce=e198305054" title="Logout" id="logout">Logout</a>
</li>
</ul>
</nav>
<a href="http://www.kodeable.com"><img src="/wp/wp-content/themes/kodeable/images/logo.png" alt="Kodeable Logo" class="logo" height="55" width="312"></a>
</header>
對不起這是一個有點亂（這是直接從WordPress的）
CSS：
/** ==============================================================
* Navigation
* ================================================================*/
header nav {
background: #fff;
border-bottom: 2px solid #3ea49b;
height: 50px;
overflow: visible;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0 0 0 24px;
position: relative;
z-index: 9999;
}
nav ul:after {
clear: both;
content: "";
display: block;
}
header nav ul li {
background: #fff;
float: left;
height: 48px;
}
nav ul li:hover > ul {
display: block;
}
header nav ul li a:hover,
header nav ul li.current-menu-item a,
header nav ul li.current-menu-parent,
header nav ul li.current-menu-parent a {
background-color: #ef6f68;
color: #fff;
}
header nav ul li.current-menu-parent ul li a {
background-color: #fff;
color: #959595;
}
header nav ul li.current-menu-parent ul li.current-menu-item a {
background-color: #ef6f68;
color: #fff;
}
header nav ul li a:hover,
header nav ul li.current-menu-item ul a:hover,
header nav ul li.current-menu-parent a:hover,
header nav ul li.current-menu-parent ul li.current-menu-item a:hover {
background-color: #ef6f68;
color: #fff;
}
header nav ul li a {
color: #959595;
display: block;
padding: 14px 13px;
}
header nav ul li a:first-child {
margin-left: 0;
}
header nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
header nav ul li.current-menu-item ul a {
background: #fff;
}
nav ul ul ul {
left: 100%;
position: absolute;
top:0;
}
ul.sub-menu {
border: 2px solid #3ea49b;
border-top: none;
min-width: 100px;
padding: 0;
}
.menu-primary-navigation-container {
float: left;
}
#user-info {
float: right;
}
#user-info li {
float: left;
}
#user-info li:first-child {
padding: 14px 13px;
}
#logout {
background-color: #ef6f68;
color: #fff;
float: right;
padding: 14px 13px;
margin-right: 24px;
}
@media only screen and (max-width: 870px) {
.menu-primary-navigation-container {
background: url(images/menu-icon.png) 2px 2px no-repeat;
cursor: pointer;
height: 48px;
margin-left: 24px;
width: 48px;
}
.menu-primary-navigation-container ul {
display: none;
margin-top: 48px;
margin-left: 10px;
padding: 0;
}
.menu-primary-navigation-container ul li {
height: auto;
}
.menu-primary-navigation-container ul li a {
background: #eee;
clear: both;
min-width: 200px;
}
.menu-primary-navigation-container ul li ul {
border: none;
display: block;
float: left;
margin: 0;
padding: 0;
position: static;
}
.menu-primary-navigation-container ul li ul li:first-child {
border-top: 2px solid #76c2bb;
}
.menu-primary-navigation-container ul li ul li a {
background: #fff;
padding-left: 24px;
}
.menu-primary-navigation-container ul li ul li a:hover {
background: #ef6f68;
}
}
@media only screen and (max-width: 470px) {
ul#user-info li:first-child {
display: none;
}
}
JS：
$(document).ready(function(e) {
$(document).click(function(e) {
if(!jQuery.browser.mobile && $(window).width() < 870) {
if(e.target.className !== "menu-primary-navigation-container") {
if($('#menu-primary-navigation').is(":visible")) {
if(e.target.className !== "menu") {
$("#menu-primary-navigation").hide();
}
}
}
}
});
$('.menu-primary-navigation-container').click(function() {
if($(window).width() < 870) {
$this = $(this);
if($('#menu-primary-navigation').is(":visible")) {
$this.children('ul').hide();
} else {
$this.children('ul').show();
}
}
});
$(window).resize(function() {
if(!jQuery.browser.mobile) {
if($(window).width() > 870){
$('#menu-primary-navigation').show();
} else {
$('#menu-primary-navigation').hide();
}
}
});
});
在此先感謝您的幫助。
也嘗試創建一個jsfiddle.net – mplungjan
或至少一個鏈接到該問題的網站 –
嘗試'overflow：auto;'爲'header'和'nav' – DevlshOne