this is the html

            <li><span><a href="#">Sekolah</a></span>
                    <li><a href="perutusan.html">Perutusan Guru Besar</a></li>
                    <li><a href="sejarah.html">Sejarah</a></li>
                    <li><a href="etos.html">Etos</a></li>
                    <li><a href="#">Iklim Sekolah</a>
                            <li><a href="falsafah.html">Falsafah Misi Visi</a></li>
                            <li><a href="logo&bendera.html">Logo & Bendera</a></li>
                            <li><a href="piagam.html">Piagam</a></li>
                            <li><a href="lagu.html">Lagu</a></li>
                    <li><a href="peraturan.html">Peraturan</a></li>
                    <li><a href="pelanevakuasi.html">Pelan Evakuasi</a></li>
                    <li><a href="pelansekolah.html">Pelan Sekolah</a></li>

            <li><span><a href="#">Pengurusan</a></span></li>
            <li><span><a href="#">PIBG</a></span></li>
            <li><span><a href="#">BKGS</a></span></li>
            <li><span><a href="#">Pengumuman</a></span></li>
            <li><span><a href="#">Murid</a></span></li>
            <li><span><a href="#">Pencapaian</a></span></li>
            <li><span><a href="#">Kurikulum</a></span></li>
            <li><span><a href="#">Ko-kurikulum</a></span></li>
            <li><span><a href="#">e-SEKOLAH</a></span></li>
            <li><span><a href="#">Rakan Sekolah</a></span></li>
            <li class="last"><span><a href="#">Calendar</a></span></li>

this is the css

cat {
 cat {
    margin: 100px auto; 
    text-align: center;

cat ul ul {
    display: none;

    cat ul li:hover > ul {
        display: block;

cat ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
    cat ul:after {
        content: ""; clear: both; display: block;

    cat ul li {
        float: left;
        cat ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
            cat ul li:hover a {
                color: #fff;

        cat ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;

    cat ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
        cat ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
            cat ul ul li a {
                padding: 15px 40px;
                color: #fff;
                cat ul ul li a:hover {
                    background: #4b545f;

    cat ul ul ul {
        position: absolute; left: 100%; top:0;

this is the link Click Here
try to go Sekolah > Iklim > Piagam
the submenu will disappear because the mouse hover on the background wording which is the 'Recent Articles'.
Please help to make the submenu stay even hover on background wording.

Recommended Answers

All 3 Replies

When I access the site I see the words "Professional Online.." over the menu and Recent Articles behind it. Not sure what you mean by the mouse hover.

Give the sub menu a high z-index - the Professional Education bit is sitting over the flyout menu.

I set for cat ul z-index:50 and it worked, you probably don't need as high a value as that, but I didn't bother looking for a smaller answer.

thank u drjohn. it works..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.