ASP.NET razor 页面菜单

Question

I am working on a project in ASP.NET Core with Razor pages and I have a menu that has a picture and a link. I am trying to make all the area of the li clickable as a link.

Here is the code for my menu in the view markup:

<div id="myMenu">
    <ul>
        <li>
             <img src=""/>
             <a asp-page="/Index"><h5>Index</h5></a>
        </li>

        <li>
             <img src=""/>
             <a asp-page="/Index2"><h5>Index2</h5></a>
        </li>

         <li>
             <img src=""/>
             <a asp-page="/Index3"><h5>Index3</h5></a>
        </li>
    </ul>
</div>

In my CSS, I tried:

#myMenu ul li a {
    display: inline-block;
    width: 100%;
}

ul {
    display: flex;
}

li {
    height: 90px;  
}

The problem is that I can only click on the link, not on the full area of the li . Is there any way I can do this?

Answer 1

If i understand your question correctly, you can put all the content you want to be clickable inside the <a> tag.

<a href="#">
    <img src="#"/>
    <h5>Title</h5>
</a>

Heres an example:

https://codepen.io/fernandesdiegod/pen/VweNXPB