Hello! How to make it so that when you hover the cursor on the vertical menu, the category opens? Opened to the right. Neither down nor up, but to the right.

    3 answers 3

    Judging by your HTML structure, as I understand, you wanted to sneeze for validation)) Well, okay ... jQuery you use, so you prescribe absolute positioning in CSS for the list of subcategories and calculate the position of the parent menu item in JS

    var posTop = $('parent_point').offset().top; var posLeft = $('parent_point').offset().left + $('parent_point').width();

    and set these coordinates for the list of sub-items.

      I made decisions using only CSS for a simple menu. HTML code:

       <div class="main_menu_item"> <a href="/billing/">Billing</a> <div class="submenu"> <div><a href="/billing/">Manage orders and invoices</a></div> </div> </div>

      CSS code:

       .submenu { display: none; position: absolute; text-align: left; background-color: white; padding: 5px;border: 1px solid #6B93FF; } div.main_menu_item:hover div { display: block; }

      When you hover the cursor on the link "Billing" will display its submenu, which will be a link "Manage orders and invoices"

      • I support the decision on CSS. I can add that for the sake of display, you can try not display: none / block, but opacity: 0/1. In the case of transparency, you can add a smooth appearance of the submenu using transition or animation. However, pay attention to the fact that completely transparent blocks, unlike display: none, are placed on top of other layers that may contain clickable elements. So besides opacity, you also need to play with z-index. Just think about what will happen to your menu on the touch devices. - Cypher

      And so if without connecting any scripts, usually using html and css, then the solution is as such, or at least as I would have done:

      html content ie the menu itself

      <! - menu start ->

       <ul class="menu"> <li class="menu__item"> <a href="#" class="menu__item__link">Home</a> <div class="menu__item__sublist"> <ul> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> </ul> </div> </li> <li class="menu__item"> <a href="#" class="menu__item__link">About</a> <div class="menu__item__sublist"> <ul> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> <li class="menu__item__sublist_item"> <a href="#" class="menu__item__sublist_link">Submenu1</a> </li> </ul> </div> </li> </ul> <!--menu end-->

      Now css itself

      / menu ------------------------- /

       .menu { width: 98px; border: 1px solid #000; } /* menu__item -------------------------*/ .menu__item { position: relative; top: 0; left: 0; list-style-type: none; } /* menu__item__link -------------------------*/ .menu__item__link { display: block; text-decoration: none; } /* menu__item__sublist -------------------------*/ .menu__item__sublist { position: absolute; top: 0; left: 98px; padding: 0 0 0 2px; display: none; } .menu__item:hover .menu__item__sublist { display: block; } /* menu__item__sublist UL -------------------------*/ .menu__item__sublist UL { } .menu__item__sublist_item { list-style-type: none; } .menu__item__sublist_link { display: block; text-decoration: none; }

      The width of the menu is set (98px) in order for the drop-down menu to be fixed. If you remove the border, do not forget to return two pixels (100px). The rest I think for comments disassemble.