There is a pop-up menu that appears when you hover over a call button, and it also appears from a hidden area outside the button that calls it. Interested in: how to make the menu appear only as part of pointing the button, with the condition at the top

.sub-menu { overflow: hidden; opacity: 0; }

do not remove (need to redefine the stylesheet file that defines it)? Link to fidl

 .sub-menu { overflow: hidden; opacity: 0; } ul { list-style: none; } .menu { overflow: hidden; opacity: 0; } .button:hover .menu, .button:hover .sub-menu { overflow: visible; opacity: 1; } .item { display: block; } 
 <div class="button"><span>Кнопка</span> <ul class="menu"> <li class="item"> <a>ссылка 1</a> <ul class="sub-menu"> <li><a>ссылка 1-1</a> </li> <li><a>ссылка 1-2</a> </li> <li><a>ссылка 1-3</a> </li> </ul> </li> <li class="item"><a>ссылка 2</a> </li> <li class="item"><a>ссылка 3</a> </li> </ul> </div>

    1 answer 1

    Change the height of the menu and submenu between zero and auto :

     .menu, .sub-menu { height: 0; } .button:hover .menu, .button:hover .sub-menu { height: auto; }

    It turns out:

     .sub-menu { overflow: hidden; opacity: 0; } ul { list-style: none; } .menu { overflow: hidden; opacity: 0; } .menu, .sub-menu { height: 0; } .button:hover .menu, .button:hover .sub-menu { overflow: visible; opacity: 1; height: auto; } .item { display: block; } 
     <div class="button"><span>Кнопка</span> <ul class="menu"> <li class="item"> <a>ссылка 1</a> <ul class="sub-menu"> <li><a>ссылка 1-1</a> </li> <li><a>ссылка 1-2</a> </li> <li><a>ссылка 1-3</a> </li> </ul> </li> <li class="item"><a>ссылка 2</a> </li> <li class="item"><a>ссылка 3</a> </li> </ul> </div>

    https://jsfiddle.net/glebkema/fdvzwhvo/