首页 新闻 搜索 专区 学院

下面这个导航在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>
草根程序猿的主页 草根程序猿 | 初学一级 | 园豆:129
提问于:2012-07-22 09:01
< >
分享
最佳答案
0

这个问题比较有趣!

首先我们来看一下ie浏览器下面的情况:

当我们的鼠标经过红色箭头指向的位置时,整个二级菜单都消失了。

再来看一下chrome浏览器下面的效果:

如果我们在红色箭头哪里很快的滑过,就会到三级菜单。但是这里我发现,如果我们在红色箭头指向的位置,

动作慢一点,那么整个二级菜单都会消失,这个结果和ie浏览器差不多。

只要有了测试结果,那么现在的问题就是要解决红色箭头这里的这个空隙,只要这里的

空隙很小很小或者说是没有,问题就会得到解决....

我不知道怎样去调二级菜单和三级菜单之间的空隙.....请原谅...呵呵呵

希望大家多多交流:hongtenzone@foxmail.com

收获园豆:5
Hongten | 小虾三级 |园豆:1768 | 2012-07-22 13:47

你说的过程就是CSS中transition的效果,这里是0.3S,也就是你说的快速滑过

artwl | 园豆:16536 (专家六级) | 2012-07-22 13:58

@artwl: 

对的,我现在测试的时候也是这样,但是现在想把红色箭头指向的位置的空隙,怎样消除呢?

Hongten | 园豆:1768 (小虾三级) | 2012-07-22 14:00

经过调试,嘿嘿,红色箭头指向的那个空隙没了,当然功能也实现了.

  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 | 园豆:1768 (小虾三级) | 2012-07-22 14:09

@Hongten: 现在只好IE下把空隙去掉了

草根程序猿 | 园豆:129 (初学一级) | 2012-07-23 10:40
其他回答(1)
0

IE下貌似可以用jQuery的fadeIn和fadeOut来模拟,但过程比较麻烦

artwl | 园豆:16536 (专家六级) | 2012-07-22 09:11
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册