I am working on the slide down menu you can see here . I

Question

0

Asked: June 5, 20262026-06-05T11:15:17+00:00 2026-06-05T11:15:17+00:00

I am working on the slide down menu you can see here . I

0

I am working on the slide down menu you can see here. I have rounded corners on both ul#navigation and ul.subnavigation. When the submenu slides down it is possible to see the border at the bottom of ul.subnavigation overlap with the content of ul#navigation, when I would like it to slide down smoothly, without the ‘flicker’. I am aware that this issue is caused by the rounded corners. I need ul.subnavigation to cover the rounded corners at the bottom of ul#navigation when the menu drops down, without seeing the double border-bottom issue. I hope this is clear! Code is below.

Thanks,

Nick

HTML

<ul id="navigation">
    <li class="dropdown"><a href="#">menu</a>
        <ul class="sub_navigation">
            <li><a href="#">home</a></li>
            <li><a href="#">help</a></li>
            <li><a href="#">disable tips</a></li>
        </ul>
    </li>
</ul>

JQUERY

$('.dropdown').hover(function() {
    $(this).find('.sub_navigation').slideToggle();
});

CSS

ul#navigation, ul.sub_navigation {
    margin:0;
    padding:0;
    list-style-type:none;
    min-width:100px;
    background-color: white;
    font-size:15px;
    font-family: Trebuchet MS;
    text-align: center;
    -khtml-border-radius: 0 0 5px 5px;    
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    border:1px black solid;
    border-top:none;
}

ul.sub_navigation {
    margin-left:-1px;
    position: absolute;
    top:28px;
}

ul#navigation {
    float:left;
    position:absolute;
    top:0;
}

ul#navigation li {
    float:left;
    min-width:100px;
}

ul.sub_navigation {
    position:absolute;
    display:none;
}

ul.sub_navigation li {
    clear:both;
}

 a,
 a:active,
 a:visited {
    display:block;
    padding:7px;
}