下面这个导航在IE下鼠标移动到二级菜单的过程中二级菜单就消失了，请问有没有什么办法解决？
0
悬赏园豆：5
[已解决问题]
解决于 2012-07-23 10:39
代码如下:
<!DOCTYPE html> <html> <head> <title>Demo</title> <meta charset="utf-8"/> <style type="text/css"> #cssmenu ul { margin: 0; padding: 0;} #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} #cssmenu > ul > li { float: left; margin-left: 15px; position: relative; } #cssmenu > ul > li > a { color: rgb(160,160,160); font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s; } #cssmenu > ul > li > a:hover {color: rgb(250,250,250); } #cssmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible; } #cssmenu > ul > li > ul:before{ content: ''; display: block; border-color: transparent transparent rgb(250,250,250) transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px; } #cssmenu > ul ul > li { position: relative;} #cssmenu ul ul a{ color: rgb(50,50,50); font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: rgb(250,250,250); padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; transition: background-color .1s; } #cssmenu ul ul a:hover {background-color: rgb(240,240,240);} #cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; width: 160px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} #cssmenu ul ul a:hover{ background-color: rgb(205,44,36); color: rgb(240,240,240); } </style> </head> <body> <div id='cssmenu'> <ul> <li><a href='index.php'><span>Home</span></a></li> <li><a href='about.php'><span>About</span></a></li> <li class='has-sub '><a href='#'><span>Services</span></a> <ul> <li class='has-sub '><a href='4wdtraining.php'><span>4WD Training</span></a> <ul> <li><a href='basictraining.php'><span>Basic</span></a></li> <li><a href='intermediatetraining.php'><span>Intermediate</span></a></li> <li><a href='advancedtraining.php'><span>Advanced</span></a></li> <li><a href='nightdriving.php'><span>Night Driving</span></a></li> <li><a href='recovery.php'><span>Recovery</span></a></li> <li><a href='custompackages.php'><span>Custom Packages</span></a></li> </ul> </li> <li><a href='bushmechanic.php'><span>Bush Mechanic</span></a></li> </ul> </li> <li><a href='estore.php'><span>eStore</span></a></li> <li><a href='gallery.php'><span>Gallery</span></a></li> <li><a href='#'><span>Contact</span></a></li> </ul> </div> </body> </html>
最佳答案
0
这个问题比较有趣！
首先我们来看一下ie浏览器下面的情况：
当我们的鼠标经过红色箭头指向的位置时，整个二级菜单都消失了。
再来看一下chrome浏览器下面的效果：
如果我们在红色箭头哪里很快的滑过，就会到三级菜单。但是这里我发现，如果我们在红色箭头指向的位置，
动作慢一点，那么整个二级菜单都会消失，这个结果和ie浏览器差不多。
只要有了测试结果，那么现在的问题就是要解决红色箭头这里的这个空隙，只要这里的
空隙很小很小或者说是没有，问题就会得到解决....
我不知道怎样去调二级菜单和三级菜单之间的空隙.....请原谅...呵呵呵
希望大家多多交流：hongtenzone@foxmail.com
收获园豆：5
你说的过程就是CSS中transition的效果，这里是0.3S，也就是你说的快速滑过
@artwl:
对的，我现在测试的时候也是这样，但是现在想把红色箭头指向的位置的空隙，怎样消除呢？
经过调试，嘿嘿，红色箭头指向的那个空隙没了，当然功能也实现了.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Demo</title> 5 <meta charset="utf-8"/> 6 <style type="text/css"> 7 #cssmenu ul { margin: 0; padding: 0;} 8 #cssmenu li { margin: 0; padding: 0;} 9 #cssmenu a { margin: 0; padding: 0;} 10 #cssmenu ul {list-style: none;} 11 #cssmenu a {text-decoration: none;} 12 #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} 13 14 15 #cssmenu > ul > li { 16 float: left; 17 margin-left: 15px; 18 position: relative; 19 } 20 21 #cssmenu > ul > li > a { 22 color: rgb(160,160,160); 23 font-family: Verdana, 'Lucida Grande'; 24 font-size: 15px; 25 line-height: 70px; 26 padding: 15px 20px; 27 -webkit-transition: color .15s; 28 -moz-transition: color .15s; 29 -o-transition: color .15s; 30 transition: color .15s; 31 } 32 33 #cssmenu > ul > li > a:hover {color: rgb(250,250,250); } 34 35 36 #cssmenu > ul > li > ul { 37 opacity: 0; 38 visibility: hidden; 39 padding: 16px 0 20px 0; 40 background-color: rgb(250,250,250); 41 text-align: left; 42 position: absolute; 43 top: 55px; 44 left: 50%; 45 margin-left: -90px; 46 width: 180px; 47 -webkit-transition: all .3s .1s; 48 -moz-transition: all .3s .1s; 49 -o-transition: all .3s .1s; 50 transition: all .3s .1s; 51 -webkit-border-radius: 5px; 52 -moz-border-radius: 5px; 53 border-radius: 5px; 54 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 55 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 56 box-shadow: 0px 1px 3px rgba(0,0,0,.4); 57 } 58 59 #cssmenu > ul > li:hover > ul { 60 opacity: 1; 61 top: 65px; 62 visibility: visible; 63 } 64 65 #cssmenu > ul > li > ul:before{ 66 content: ''; 67 display: block; 68 border-color: transparent transparent rgb(250,250,250) transparent; 69 border-style: solid; 70 border-width: 10px; 71 position: absolute; 72 top: -20px; 73 left: 50%; 74 margin-left: -10px; 75 } 76 77 #cssmenu > ul ul > li { position: relative;} 78 79 #cssmenu ul ul a{ 80 color: rgb(50,50,50); 81 font-family: Verdana, 'Lucida Grande'; 82 font-size: 13px; 83 background-color: rgb(250,250,250); 84 padding: 5px 8px 7px 16px; 85 display: block; 86 -webkit-transition: background-color .1s; 87 -moz-transition: background-color .1s; 88 -o-transition: background-color .1s; 89 transition: background-color .1s; 90 } 91 92 #cssmenu ul ul a:hover {background-color: rgb(240,240,240);} 93 94 95 #cssmenu ul ul ul { 96 visibility: hidden; 97 opacity: 0; 98 position: absolute; 99 margin-left: -15px; 100 top: -16px; 101 left: 206px; 102 padding: 16px 0 20px 0; 103 background-color: rgb(250,250,250); 104 text-align: left; 105 width: 160px; 106 -webkit-transition: all .3s; 107 -moz-transition: all .3s; 108 -o-transition: all .3s; 109 transition: all .3s; 110 -webkit-border-radius: 5px; 111 -moz-border-radius: 5px; 112 border-radius: 5px; 113 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 114 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); 115 box-shadow: 0px 1px 3px rgba(0,0,0,.4); 116 } 117 118 119 #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} 120 121 122 #cssmenu ul ul a:hover{ 123 background-color: rgb(205,44,36); 124 color: rgb(240,240,240); 125 } 126 </style> 127 </head> 128 <body> 129 <div id='cssmenu'> 130 <ul> 131 <li><a href='index.php'><span>Home</span></a></li> 132 <li><a href='about.php'><span>About</span></a></li> 133 <li class='has-sub '><a href='#'><span>Services</span></a> 134 <ul> 135 <li class='has-sub '><a href='4wdtraining.php'><span>4WD Training</span></a> 136 <ul> 137 <li><a href='basictraining.php'><span>Basic</span></a></li> 138 <li><a href='intermediatetraining.php'><span>Intermediate</span></a></li> 139 <li><a href='advancedtraining.php'><span>Advanced</span></a></li> 140 <li><a href='nightdriving.php'><span>Night Driving</span></a></li> 141 <li><a href='recovery.php'><span>Recovery</span></a></li> 142 <li><a href='custompackages.php'><span>Custom Packages</span></a></li> 143 </ul> 144 </li> 145 <li><a href='bushmechanic.php'><span>Bush Mechanic</span></a></li> 146 </ul> 147 </li> 148 <li><a href='estore.php'><span>eStore</span></a></li> 149 <li><a href='gallery.php'><span>Gallery</span></a></li> 150 <li><a href='#'><span>Contact</span></a></li> 151 </ul> 152 </div> 153 </body> 154 </html>
只是在代码的第99行添加了：
1 margin-left: -15px;
搞定。。。
@Hongten: 现在只好IE下把空隙去掉了
其他回答(1)
0
IE下貌似可以用jQuery的fadeIn和fadeOut来模拟，但过程比较麻烦
