1

I've been developing a site for the past couple of days and have everything working adequately in all major browsers but Opera. For some unknown reason the navigation won't revert to display:none; when I exit the dropdown navigation.

If there's some trick that I'm unaware of please enlighten me.

Problem URL: http://demo.ivannovak.com/iocaste/index.html

Again, everything is fine in FF, Chrome, Safari and IE7+. This problem is specific to Opera.

The relevant HTML:

            <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 -->

The relevant CSS:

#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;
}
5
  • 1
    Seems to work in Opera 10.53. Jun 24, 2010 at 16:10
  • Ah, I was testing in 10.00 beta... probably should have upgraded. facepalm
    – Ivan Novak
    Jun 24, 2010 at 16:53
  • Opera always has another (dozen) beta(s).
    – reisio
    Jun 24, 2010 at 17:12
  • 1
    Also fine in Opera 10.10/Linux. Jun 24, 2010 at 20:57
  • Also fine in Opera 10.11/Linux. Jun 24, 2010 at 21:02

1 Answer 1

0

Seems this was a redraw bug that's been fixed in later releases.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.