How to rewrite this code in css

$(".sub_top_men3 li>ul").toggle() $(".sub_top_men3 li").css("position","relative"); $(document).on({ mouseenter: function() { el=$(this).find("ul") el.toggle().css({ 'position':'absolute', 'top':'-5px', 'left':'195px', 'background':'#65331f', 'color':'#fff', 'width':'267px', 'padding-top':'15px', 'padding-bottom':'20px' }); }, mouseleave: function() { el.hide(); }}, '.sub_top_men3 li');

Wrote like this, but it doesn't work.

 <style> .sub_top_men3>ul>li{ display: none; } .sub_top_men3 li { position: relative; } .sub_top_men3>ul>li:hover { display: block; position:absolute; top:-5px; left:195px; background:#65331f; color:#fff; width:267px; padding-top:15px; padding-bottom:20px; } </style>
  • four
    Add the menu markup itself, but it is not clear what to apply. - Andrew B
  • And why do you hang css hover on a li element when in js code it hangs on ul as a whole? just need .sub_top_men3> ul: hover - alexoander

0