如何修复元素的外观？

Question

有人可以帮我解决这个问题吗？

我写代码：

 $(document).ready(function() { var timer; tp = 500; cnav = ".categories"; fsb = "li.submenu_f"; ssb = "li.submenu_s"; $(cnav).find("ul li:has(> ul)").addClass("submenu_f"); $(cnav).find("ul li ul li:has(> ul)").attr("class", "submenu_s"); $(fsb).hover(function() { clearTimeout(timer); $(cnav).css("width", "561px"); $(fsb).find("ul").show(); }, function() { timer = setTimeout(function() { $(cnav).css("width", "303px"); $(fsb).find("ul").hide(); }, tp); }); $(ssb).hover(function() { clearTimeout(timer); $(cnav).css("width", "803px"); $(ssb).find("ul").show(); }, function() { timer = setTimeout(function() { $(cnav).css("width", "561px"); $(ssb).find(ul).hide(); }, tp); }); }); 

 .categories { background: #fff; position: absolute; left: 47px; top: 54px; width: 303px; overflow: hidden; } .categories ul li ul { position: absolute; top: 0; left: 274px; padding-left: 50px; width: 215px; height: 100%; display: none; } .categories ul li ul li ul { position: absolute; display: inline-block; top: 0; left: 258px; width: 197px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="categories"> <ul> <li><a href="#" title="">Электроника</a></li> <li><a href="#" title="">Бытовая техника</a></li> <li><a href="#" title="">Компьютеры</a></li> <li><a href="#" title="">Товары для дома</a></li> <li><a href="#" title="">Товары для авто</a></li> <li><a href="#" title="">Сад и огород</a></li> <li><a href="#" title="">Строительство и ремонт</a></li> <li> <a href="#" title="">Подарки и украшения</a> <ul> <li><a href="#" title="">Теле-видео-аудио техника</a></li> <li><a href="#" title="">Телефоны и связь</a></li> <li> <a href="#" title="">Фото и видео</a> <ul> <li><a href="#" title="">Плиты</a></li> <li><a href="#" title="">Вытяжки</a></li> <li><a href="#" title="">Холодильники</a></li> <li><a href="#" title="">Духовые шкафы</a></li> <li><a href="#" title="">Варочные поверхности</a></li> <li><a href="#" title="">Посудомоечные машины</a></li> <li><a href="#" title="">Стиральные машины</a></li> <li><a href="#" title="">Аксессуары</a></li> </ul> </li> <li><a href="#" title="">Портативная электроника</a></li> <li><a href="#" title="">Прочая электроника</a></li> <li><a href="#" title="">Элементы питания</a></li> </ul> </li> <li><a href="#" title="">Парфюмерия и косметика</a></li> <li><a href="#" title="">Товары для детей</a></li> <li> <a href="#" title="">Доп. меню</a> <ul> <li><a href="#" title="">link 1</a></li> <li><a href="#" title="">link 2</a></li> <li> <a href="#" title="">hover link 3</a> <ul> <li class="title">test</li> <li><a href="#" title="">test link 1</a></li> <li><a href="#" title="">test link 2</a></li> </ul> </li> <li><a href="#" title="">link 3</a></li> </ul> </li> <li><a href="#" title="">Товары для спорта и отдыха</a></li> <li><a href="#" title="">Товары для животных</a></li> <li><a href="#" title="">Одежда и обувь</a></li> <li><a href="#" title="">Бытовая химия</a></li> <li><a href="#" title="">Фермерские товары</a></li> </ul> </div> 

或： http : //jsfiddle.net/wagwandude/6dWCg/18/

当悬停在li.submenu_f上时，我们会看到ul li ul，当悬停在li.submenu_s上时，我们会看到ul li ul li ul。 它有效，但是当我再添加1个子菜单时-我发现问题。 菜单彼此叠加..我无法解决此问题。

Answer 1

首先， $(fsb)使用类.submenu_f来获取所有内容，因此要代替$(fsb).find("ul").show()和$(fsb).find("ul").hide() ，将其替换$(fsb)和$(this) ，仅获得悬停的li 。

然后，当您将鼠标悬停在另一个li时，您将希望隐藏一个li的ul li ul ，因此您只应在每个悬停时隐藏所有ul li ul ：

$(fsb).hover(function(){
    $(fsb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "561px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "303px");
        $(this).find("ul").hide();
    }, tp);
});  

$(ssb).hover(function(){
    $(ssb).find("ul").hide();
    clearTimeout(timer);
    $(cnav).css("width", "803px");
    $(this).find("ul").show();
}, function(){
    timer = setTimeout(function () {
        $(cnav).css("width", "561px");
        $(this).find("ul").hide();
    }, tp);
});

这是一个有效的小提琴： http : //jsfiddle.net/4t1u0a2a/2/