Home/ Questions/Q 6616531
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:35:38+00:00

Here’s a sample of the page I’m working with. The problem is that the

  • 0

Here’s a sample of the page I’m working with. The problem is that the user has to click on the link before they are directed to the target page. Is there a way of making the highlighted box for each of those links active and respond to click as well?

My users are complaining that unless they click on the link, clicking in the box does not work.

Any help will be appreciated.

 <html>
    <head>
    </head>
    <style type="text/css">
    li {
        background-color: #F5F2EE;
        background-position: left top;
        background-repeat: no-repeat;
        border: 1px solid #E9E3DD;
        height: auto;
        width: 100px;
        margin-bottom: 4px;
        padding: 4px 5px 4px 20px;
    }

    li a, span {
        color: #4B0F19;
        text-decoration: none;
    }

    li:hover {
        background-color: #DEB887;
        cursor: pointer;
    }
    </style>

    <body>
        Hello world

        <ul>
            <li><a href="http://google.com">Please see this</a></li>
            <li><a href="http://msn.com">Another link</a></li>
            <li><a href="http://twitter.com">The main link</a></li>
            <li><a href="http://bbc.co.uk">fourth link</a></li>
        </ul>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Make the li have 0 padding and margin, the a display: block;, and move the styles to a.
    This way the a will expand to fill all the li, and so there will be no area that is part of the menu item but it not filled by the a.

    Does this make sense? Do you understand the different approach?

    live example: http://jsfiddle.net/NB6Wx/

    (You could also capture the click on the li with JavaScript, and trigger a click in the a… but that would be patching a problem that can actually be solved.)
    (A bad solution.)

    • 0