如何在不破坏代码的情况下向可折叠侧边栏菜单添加可点击链接？

Question

Currently trying to make a sidebar on HTML/CSS however I am struggling to finalise it by adding clickable links for navigating around my site.

I believe it is a simple CSS issue or a simple HTML problem but it's driving me crazy!

                    <li class="c-menu__item has-submenu" title="Account">
                        <div class="c-menu__item__inner"><i class="fa fa-cog"></i>
                            <div class="c-menu-item__title"><a href="accountdetails.php"
                                    style="text-decoration: none"><span>Account Settings</span></div></a>
                        </div>

Is what I have at the moment but there are two problems, I cannot click the button when the sidebar is collapsed, nor can I click the div the text/icon are present in, I must only click the text to get it to work.

Preferably I would like to click the box the icon, text are held in for easier usage.

How can I achieve this instead of just text being hyperlinked?

Photo showing the area I would like clickable on sidebar opposed to just the text.

Answer 1

This is because your anchor tag is wrapping only the text "Account settings". You should place your anchor tag in a way that wraps the elements that you want them to work like a link.

Also be aware that in the code you shared, you closed a div before closing the anchor tag, and you are not closing the list item tag.

Try like this:

<li class="c-menu__item has-submenu" title="Account" >
    <a href="accountdetails.php" style="text-decoration: none">
        <div class="c-menu__item__inner">
            <i class="fa fa-cog"></i>
            <div class="c-menu-item__title">
                <span>Account Settings</span>
            </div>
        </div>
    </a>
</li>