Как сохранить родительское меню, когда мышь находится в дочернем меню в выпадающем меню

Question

Я пытаюсь создать выпадающее меню.Это работает хорошо.Я хочу, чтобы верхнее меню, когда зависли стволы в белый цвет.при переходе вниз к подменю верхнее меню должно оставаться белым.Но верхнее меню превращается в свой обычный исходный цвет.

Как держать родительское меню зависшим при перемещении мыши в подменю.

Код здесь:

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

Answer 1

Я не понимаю, почему вам нужно использовать JS здесь.Я видел слишком много примеров того, как люди пытались создать простые выпадающие меню, которые просто не нашли времени, чтобы использовать правильную структуру HTML и использовать CSS для управления элементами.

Если вы действительно не хотите иметь какую-то анимацию (но опять же вы можете использовать CSS3-преобразование для анимации), тогда я бы предложил использовать этот ответ, который я дал другому пользователю, у которого некоторое время назад была проблема с выпадающим меню.

Выпадающие меню CSS, перемещающие содержимое страницы вниз

Приведенная выше ссылка дает вам очень быстрый, прямой пример раскрывающегося решения HTML + CSS.Используя этот пример, вы можете добиться того, что ищете, оставив родительскую ссылку «выделенной», используя только HTML и CSS.

---

Редактировать:

Чтобы напрямую обратиться к вашей проблеме.Все, что вам нужно сделать, чтобы решить вашу проблему, это настроить свой CSS немного по-другому.

Изменить:

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

На:

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

Как видите,Я выбираю элемент li, чтобы использовать псевдо-селектор :hover вместо тега.Это потому, что вы заключаете подменю ul в этот тег.Технически, это родительский элемент.

Answer 2

Проблема связана с тем, что состояние «зависания» находится в CSS, поэтому, когда вы покидаете элемент «а», вы теряете состояние наведения.

пара модификаций вашего кода должна сделать эту работу.

            function jsddm_open() {
                jsddm_canceltimer();
                jsddm_close();
                ddmenuitem = $(this).find('ul').css('visibility', 'visible');
                $(">a", $(this)).css("background-color", "#FFF");
            }

           function jsddm_close() {
                if (ddmenuitem) {
                    ddmenuitem.css('visibility', 'hidden');
                    $(ddmenuitem).prev().css("background-color", "");
                }
            }

ПРИМЕЧАНИЕ: вы также пропустили конечный тег li в опубликованном коде