please see menu i'm using on site below. works fine in browsers ie10 (ie11 fine) when hover on menu item go select sub menu item, when cursor goes of small gaps between vertical sub menu items menu thinks user has went outside submenu , closes.
can tell me causing happen in ie10 , nothing else?
regards, marc
#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 { 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 { 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 left 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 & 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>
Comments
Post a Comment