Navigateur d'Opera: weover de vol stationnaire

Question

J'ai développé un site pendant les deux derniers jours et ai tout fonctionné correctement dans tous les principaux navigateurs mais Opera. Pour une raison inconnue, la navigation ne retournera pas à display:none; lorsque je quitterai la liste déroulante de navigation.

S'il y a un truc que je ne connais pas, s'il vous plaît éclairez-moi.

Problème URL: http://demo.ivannovak.com/iocaste/index.html

Encore une fois, tout va bien dans FF, Chrome, Safari et IE7 +. Ce problème est spécifique à Opera.

Le code HTML correspondant:

  <ul id="navigation"> 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li> 
        <a href="page.html">Example Set</a> 
        <ul> 
         <li><a href="full-width.html">Full-Width Page</a></li> 
         <li><a href="html-test.html">HTML Test</a></li> 
         <li><a href="page.html">Normal Page</a></li> 
         <li> 
          <a href="page.html">GrandChild Nav</a> 
          <ul> 
           <li><a href="page.html">Normal Page</a></li> 
           <li><a href="page.html">Normal Page</a></li> 
           <li><a href="page.html">Normal Page</a></li> 
          </ul> 
         </li> 
         <li><a href="contact.html">Normal Page</a></li> 
        </ul> 
       </li> 
       <li><a href="blog.html">Blog</a></li> 
       <li><a href="portfolio.html">Portfolio</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul><!-- #navigation --> 

Le CSS concerné:

#navigation { 
    float:right; 
    position:relative; 
    top:35px; 
    z-index:10; 
    margin-right:10px; 
    list-style: none; 
} 

#navigation li { 
    float:left; 
    position:relative; 
    margin:0; 
    padding:0; 
} 

#navigation li.active > a, 
#navigation li a:hover { 
    color:#e5e5e5; 
} 

#navigation li a { 
    color:#b2b2b2; 
    text-decoration:none; 
    padding:5px 12px; 
} 

#navigation li ul { 
    display:none; 
    position:absolute; 
    text-align:center; 
    z-index:3; 
    left:50%; 
    margin:0 0 0 -104px; 
    padding-bottom:10px; 
    top:100%; 
    list-style: none; 
} 

#navigation li:hover ul { 
    display:block; 
} 

#navigation li ul li { 
    width:178px; 
    text-align:center; 
    padding:0 15px; 
    float:none; 
} 

#navigation > li > ul > li:first-child { 
    background:url(../img/child_nav_top.png) no-repeat 50% 0 transparent; 
    padding-top:20px; 
} 

#navigation > li > ul > li { 
    background:url(../img/child_nav_repeat.png) repeat-y 50% 0 transparent; 
} 

#navigation > li > ul > li:last-child { 
    background:url(../img/child_nav_bottom.png) no-repeat 50% 100% transparent; 
    padding-bottom:20px!important; 
} 

#navigation li.lastChild { 


/* IE 8 is dumb */ 
    background:url(../img/child_nav_bottom.png) no-repeat 50% 100% transparent; 
    padding-bottom:20px!important; 
} 

#navigation li ul li ul { 
    position:absolute; 
    display:none!important; 
    z-index:4; 
    left:278px; 
    top:-15px; 
} 

#navigation li ul li:hover ul { 
    display:block!important; 
} 

#navigation li ul li ul li { 
    float:none; 
    width:119px; 
    text-align:center; 
    padding:0 8px 0 15px; 
} 

#navigation > li > ul > li > ul > li:first-child { 
    background:url(../img/grandChild_nav_top.png) no-repeat 50% 0 transparent; 
    padding-top:15px; 
} 

#navigation > li > ul > li > ul > li { 
    background:url(../img/grandChild_nav_repeat.png) repeat-y 50% 0 transparent; 
} 

#navigation > li > ul > li > ul > li:last-child { 
    background:url(../img/grandChild_nav_bottom.png) no-repeat 50% 100% transparent; 
    padding-bottom:20px; 
} 

#navigation li.lastGrandChild { 
    background:url(../img/grandChild_nav_bottom.png) no-repeat 50% 100% transparent; 
    padding-bottom:20px; 
} 

Answer 1

semble que ce fut un bug de redessiner qui a été corrigé dans les versions ultérieures.