Ben bir açılır menü oluşturmak için çalışıyorum. Bu iyi çalışıyor. Beyaz renk içine truns süpürdü zaman üst menü istiyorum. Alt menülerde aşağı taşırken, üst menü beyaz renkte kalmalıdır. Ama üst menü normal orijinal rengine dönüşür.

Alt menülerdeki fareyi hareket ederken nasıl ana menü tutmak süpürdü.

Kodu burada:

HTML

 <ul id="jsddm" class="menu_nor_cont">
         <li style="margin-left:15px;"><a href="#">Home</a>
        <li><a href="#">Job Seeker Login</a>

        </li>
        <li><a href="#">Post Resume</a>
        </li>
        <li><a href="#">Search jobs<span style="margin-left:5px;"><img src="images/down.png"  style="width=15px; height=8px;"></span></a>
            <ul>
                <li><a href="#">Advanced Search</a></li>
                <li><a href="#">Jobs by Company</a></li>
                <li><a href="#" style="border-bottom:none;">Jobs by category</a></li>
            </ul>
        </li>
        <li><a href="#">Employer Login</a></li>
        <li><a href="#"  style="border-right:none;">Post Job</a></li>
    </ul>

JS

var timeout    = 0;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
   jsddm_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
   $('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;

CSS

#jsddm
{   margin: 0;
    padding: 0;


}

    #jsddm li
    {   
        float: left;
        list-style: none;

    }

    #jsddm li a
    {   display: block;
        padding: 5px 12px;
        padding-left:15px;
        padding-right:15px;
        text-decoration: none;
        border-right: 1px solid #DBDBDB;
        padding-bottom:6px;
        color: #EAFFED;
        white-space: nowrap}

    #jsddm li a:hover
    {   
        background-color:#FFF;
        color:#000;

    }

        #jsddm li ul
        {   margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border:#3895C0 1px solid;
            border-top:none;

            z-index:1001;
            margin-left:-2px;
        }

        #jsddm li ul li
        {   float: none;
            display: inline;
            margin:0px;


        }

        #jsddm li ul li a
        {   width: auto;
            background: #fff;
            color:#080CB2;
            font-weight:normal;
            font-size:11px;
            border-bottom:1px solid #CCC;
            text-decoration:none;
            width:180px;
        }

        #jsddm li ul li a:hover
        {

            text-decoration:underline;
            color:#080CB2;
        }