菜单项中svg图像之间的间隙填充

Question

I have a menu that is made up of ul and li the list items nest SVGs as the items that will show up in the menu. inside the first ul, li nested another ul,li that shows up on hover as a submenu, everything works fine but I want to create a gap filler around my SVGs in the item menu so that when I hover a little bit away from the image, the sub menu would still appear.

I searched that and find some ways involved using the pseudo class ::after, but did not manage to make it work

This is my code

<div id="menu">
<ul>
 <li> <img  src="this is just for code"/>
 <ul>
 <li> <a href="#">link</a></li>
 <li> <a href="#">link2</a>/li>
 </ul>
 </li>
 <li> <img  src="this is just for code"/>
  <ul>
  <li> <a href="#">link</a></li>
  <li> <a href="#">link</a></li>
 </ul>
  </li>

the css is

#menu ul li{
    width:auto;   
    height:2.5em;   
    list-style:none;
    float:left;
    margin: 0em 20px 0em 20px ;
    padding: 0px  ;   
    cursor:pointer;
    justify-content:space-between;

 #menu ul ul li{
float:none;
width:100%;
height:auto;
padding: 1em 0;
text-align:center;

 #menu ul li:hover > ul{

display:block;  }

   #menu ul li img{
        width:inhrtit;
        height:inherit;
        margin: 0 0 60px 0;
        position:relative;
        bottom:0.6em;


        }   

   #menu ul li:hover > ul::after{
        width:auto;
        height:2.5em;
        padding:0px 100px;
        margin: 90px;
        position:absolute;
        right:70px; left:90px;
        pointer-events: none;
        -webkit-transform: translateX(-110%);
        transform: translateX(-110%);

        }
    #menu ul li:hover > ul::after   {
pointer-events: auto;

    }

Sorry my code is lousy. as the first question I hope this is not an enough dump one.

Answer 1

Since you're looking to increase the hover area of <li> elements, you can add padding to them.

For example, below is an example of using padding to increase the clickable area. Increasing hover area is similar.

https://jsfiddle.net/gazg1yuy/