When hovering to select an item from my drop down navigation, about 40% of the time the dropdown will just disappear. It seems to be more noticeable in IE. So far I can't seem to figure out the reason this is happening. I am guessing it's a Z-Index issue. Any help is greatly appreciated.

Below is the code and here is the live site: http://avatarmedicalsolutions.com


            <div id="nav">      
            <ul class="menu">
                <li <?php if ($selected == 1 || $selected == 0) { echo 'class="current_page_item"';} ?>><a href="index.php?selected=1">Home</a></li> 
                <li <?php if ($selected == 2) { echo 'class="current_page_item"';} ?>><a href="#">Applications</a> 
                    <ul class="sub-menu"> 
                        <li><a href="#">Hospitals</a></li> 
                        <li><a href="#">CRO/Lab</a></li> 
                        <li><a href="#">Surgery Ctr.</a></li> 
                <li <?php if ($selected == 3) { echo 'class="current_page_item"';} ?>><a href="#">Products</a> 
                    <ul class="sub-menu"> 
                        <li><a href="analytics.php?selected=3">Analytics</a></li> 
                        <li><a href="barcode.php?selected=3">Barcode Readers</a></li> 
                        <li><a href="printer.php?selected=3">RFID Tag Printers</a></li> 
                        <li><a href="storage.php?selected=3">RFID Storage Systems</a></li> 
                        <li><a href="software.php?selected=3">Software Solution</a></li> 
                        <li><a href="#">Customer Support</a></li> 
                <li <?php if ($selected == 4) { echo 'class="current_page_item"';} ?>><a href="newsMedia.php?selected=4">News/Media</a></li> 
                <li <?php if ($selected == 5) { echo 'class="current_page_item"';} ?>><a href="about.php?selected=5">About Us</a></li> 
                <li <?php if ($selected == 6) { echo 'class="current_page_item"';} ?>><a href="contact.php?selected=6">Contact</a></li> 
        </div><!--end nav-->


    /* --------- */
    /* -- Nav -- */
    /* --------- */
    #nav { height:43px; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;  }
    .menu { padding: 7px 6px 0 0; position:relative; }
    .menu li { margin: 0 5px; float: left; list-style:none; position:relative; border-right: 1px solid #DBDBDB; }
    .menu a { display: block; padding:  8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 15px; }
    .menu .current a, .menu li:hover > a { color: #CA9800; }
    .menu ul li:hover a, .menu li:hover li a { color: #555; }
    .menu ul a:hover { background: #CA9800 !important; color: #fff !important; }
    .menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px;    position: absolute; top: 35px; border: solid 1px #ddd; z-index:9000 !important; }
    .menu li:hover > ul { display: block; }
    .menu ul li { float: none; margin: 0; padding: 0; }
    .menu ul a { font-size: 14px; }
    .menu ul ul { left: 250px; top: -3px; }
    .menu li.current_page_item a { color: #CA9800; }
    .menu .sub-menu li.current_page_item a { color: #CA9800; }

1 answer


there's a gap between the menu li a and the dropdown. look in firebug. i increased the padding top and bottom of the li a from 8px to 9px and there is no longer a gap. the gap might change size based on the browser. are you using a reset.css? that would get rid of most inconsistencies.

Answered over 7 years ago by Stephen Cronin