IE10停止菜单工作正常

时间:2015-07-16 12:34:40

标签: html css menu internet-explorer-10

请参阅我在下面的网站上使用的菜单。它在大多数浏览器中工作正常,但是当你将鼠标悬停在菜单项上时,IE10(IE11很好)然后选择子菜单项,当光标进入垂直子菜单项之间的任何小间隙时,菜单认为用户已离开子菜单并关闭。

有人可以告诉我在IE10中发生这种情况的原因是什么?

此致 马克



#nav-wrap	{
	height:28px;
	position:relative;
	top:-70px;
	width:100%;
	margin:0 auto;
	z-index:10;
	text-align:center;
}

#nav {
	font-size:15px;
	font-weight:400;
	text-align:center;
	position:relative;
	display:inline-table;
}

#nav ul li:hover > ul {
	display:block;
}

#nav ul {
	padding:0px;
	margin:0px;
	list-style:none;
	position:relative;
}

#nav ul:after {
	content:"";
	clear:both;
	display:block;
}

#nav ul li {				/* KEY - Changes main nav bar li style */
	float:left;
	margin-left:14px;
	margin-right:14px;
}

#nav ul li a {
	display:block;
	color:white;
	text-decoration:none;
	background:#416b8f;
	border-radius:2px;
	padding:3px 15px 3px 15px;
}

#nav ul li a:hover {
	background:#003768;
	border-radius:0px;
	-webkit-transition: ease-in 0.2s;
    -moz-transition: ease-in 0.2s;
    -o-transition: ease-in 0.2s;
    transition: ease-in 0.2s;
}

.selected {
	background:#003768;
	display:block;
	color:white;
	text-decoration:none;
	border-radius:2px;
	padding:3px 15px 3px 15px;
}

#nav ul ul {
	position:absolute;
	top:100%;
	text-align:left;
	margin:0;
	display:none;
}

#nav ul ul li {
	float:none;
	position:relative;
	margin:0px;
	font-size:14px;
	padding-top:1px;
	padding-bottom:1px;
	padding-left:2px;
}

#nav ul ul li:hover {
	
}

#nav ul ul li a {
	border-radius:0px;
	padding-top:5px;
	padding-bottom:5px;
}

#nav ul ul li a:hover {
	background:#003768;
	-webkit-transition: ease-in 0.2s;
    -moz-transition: ease-in 0.2s;
    -o-transition: ease-in 0.2s;
    transition: ease-in 0.2s;
}

#nav ul ul ul {
	position:absolute;
	left:100%;  /* switch to left to change position of nested menus */
	top:0;
}

li {
  white-space: nowrap; 
}

<div id="nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">ABOUT</a>
                    <ul>
                        <li><a href="#">ACET</a>
                            <ul>
                                <li><a href="#">ACET HELPS</a></li>
                                <li><a href="#">ACCREDITATION</a></li>
                            </ul>
                        </li>
                        <li><a href="#">FEATURES</a></li>
                        <li><a href="#">WEB DASHBOARD</a></li>
                        <li><a href="#">ACET 8</a></li>
                        <li><a href="#">CLIENTS</a></li>
                        <li class="selected">NEWS</li>
                    </ul>
                </li>
                <li><a href="#">SERVICES</a>
                    <ul>
                        <li><a href="#">TRAINING</a></li>
                        <li><a href="#">SUPPORT</a>
                            <ul>
                                <li><a href="#">HELP DESK</a></li>
                                <li><a href="#">USER GUIDE</a></li>
                                <li><a href="#">ACET TECHNICAL PRACTICE</a></li>
                            </ul>
                        </li>
                        <li><a href="#">DATA IMPORT</a></li>
                        <li><a href="#">DEVELOPMENT</a></li>
                    </ul>
                </li>
                <li><a href="#">ASSET INTEGRITY</a>
                    <ul>
                        <li><a href="#" target="_blank">INTEGRITY INFORMATION</a></li>
                        <li><a href="#" target="_blank">INSPECTION &amp; INTEGRITY MANAGEMENT</a></li>
                        <li><a href="#" target="_blank">NON-DESTRUCTIVE TESTING</a>
                            <ul>
                                <li><a href="#" target="_blank">SPECIALIST INSPECTION SERVICES</a></li>
                                <li><a href="#">INSPECTION METHOD CAPABILITY</a></li>
                                <li><a href="#">INSPECTION METHOD SELECTION</a></li>
                            </ul>
                        </li>
                        <li><a href="#" target="_blank">DATA SOLUTIONS</a></li>
                    </ul>
                </li>
                <li><a href="#">DOWNLOADS</a>
                    <ul>
                        <li><a href="#" target="_blank">LATEST NEWSLETTER</a></li>
                        <li><a href="#" target="_blank">ACET DATA SHEET</a></li>
                        <li><a href="#" target="_blank">ASSET INTEGRITY BROCHURE</a></li>
                        <li><a href="#" target="_blank">THE INSPECTION STANDARD</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </div>
&#13;
&#13;
&#13;

0 个答案:

没有答案