85

I have the following markup,

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

The <li> is a bit big, with a small image on its left, I have to actually click on the <a> to activate the link. How can I make a click on the <li> activate the link?

Edit1:

ul#menu li
{
    display:block;
    list-style: none;
    background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

ul#menu li a
{

    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}
0

18 Answers 18

134
#menu li { padding: 0px; }
#menu li a { margin: 0px; display: block; width: 100%; height: 100%; }

It may need some tweaking for IE6, but that's about how you do it.

5
  • 1
    This is how I would do it. It expands the link to the size of the <li> tag. Jul 13, 2009 at 20:18
  • Its working, but the text(link) is sticking to the right border, when I gave a padding-right: .5em the <a> is going out of <li>
    – San
    Jul 13, 2009 at 20:18
  • Keep tweaking and you'll get it looking perfect. Check for negative margins and padding, something probably isn't adding up and its collapsing. Also, make sure you don't have an errant text-align: right; stuck in there. Jul 13, 2009 at 20:25
  • I gave the text(link) a right padding by actually giving the the <li> a padding-right:0.5em and having the <li> and <a> having the same background color. But now that .5em right part of <li >is not click able, but that's fine.
    – San
    Jul 13, 2009 at 20:40
  • San: Fixed that problem by intelligently placing the padding on the link itself: li { padding-top: .3em; padding-bottom: .3em; a { display: block; margin: 0px; padding-left: 10%; width: 90%; height: 100%; } }
    – Ari Gesher
    Aug 27, 2012 at 23:49
29

As Marineio said, you could use the onclick attribute of the <li> to change location.href, through javascript:

<li onclick="location.href='http://example';"> ... </li>

Alternatively, you could remove any margins or padding in the <li>, and add a large padding to the left side of the <a> to avoid text going over the bullet.

1
  • 1
    can you expand on that? Why is it a bad idea Jun 23, 2015 at 21:12
18

Just to throw this option out there:

<ul id="menu">
    <a href="#"><li>Something1</li></a>
    <a href="#"><li>Something2</li></a>
    <a href="#"><li>Something3</li></a>
    <a href="#"><li>Something4</li></a>
</ul>

This is the style I use in my menus, it makes the list item itself a hyperlink (similar to how one would make an image a link).
For styling, I usually apply something like this:

nav ul a {
    color: inherit;
    text-decoration: none;
}

I can then apply whatever styling to the <li> that I wish.

Note: Validators will complain about this method, but if you're like me and do not base your life around them, this should work just fine.

2
  • 4
    The children (direct descendants) of a ul element must all be li elements. This is a purely syntactic requirement. as per correct semantics for ul in ul - this answer will result in invalid HTML
    – EGC
    Feb 4, 2020 at 7:44
  • 1
    A wild Validator has appeared. :)
    – Duncan
    Jul 17, 2020 at 11:33
13

Just add wrap the link text in a 'p' tag or something similar and add margin and padding to that element, this way it wont affect the settings that MiffTheFox gave you, i.e.

<li> <a href="#"> <p>Link Text </p> </a> </li>
1
  • This one was actually the best for me. I used a <span> and set the display to block. Span just seemed more correct that a paragraph. Either way it worked well. Mar 4, 2018 at 9:26
10

This will make whole <li> object as a link :

<li onclick="location.href='page.html';"  style="cursor:pointer;">...</li>
0
2

The following seems to work:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}
2

Anchor href link apply to li:

#menu li a {
       display:block;
    }
2
a {
  display: block;
  position: relative;
}

I think that is all you need.

1

jqyery this is another version with jquery a little less shorter. assuming that the <a> element is inside de <li> element

$(li).click(function(){
    $(this).children().click();
});
1
  • 2
    This will trigger a continuous loop. Since clicking on the child->clicks on the parent too.
    – RockyK
    Jun 25, 2020 at 21:30
1

Or you can create an empty link at the end of your <li>:

<a href="link"></a>

.menu li{position:relative;padding:0;}
.link{
     bottom: 0;
     left: 0;
     position: absolute;
     right: 0;
     top: 0;
}

This will create a full clickable <li> and keep your formatting on your real link. It could be useful for <div> tag as well

1

try:

ul#menu li a {
    color:#696969;
    display:block;
    font-weight:bold;
    line-height:2.8;
    text-decoration:none;
    width:100%;
}
<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>

0

You could try an "onclick" event inside the LI tag, and change the "location.href" as in javascript.

You could also try placing the li tags within the a tags, however this is probably not valid HTML.

2
  • In my experience, faking links through Javascript almost always results in a poor user experience.
    – Chuck
    Jul 13, 2009 at 20:19
  • It is simply one option for him to consider, after all it is his website. And he could keep the normal <a> link there, and it would function as normal even if Javascript were turned off (just not if the li were clicked).
    – Marineio
    Jul 13, 2009 at 20:38
0

Ignacio Pascual provided this code, which work like a charm. I would like to enhance it with a smooth scroll.

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 

I tried to add a smooth scrolling, by using part of this code both separately or by inserting it :

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

But I never got thought it :(

I think there is a trick because smooth scroll event work on a element and with the hack of the li element making it linkable it's not really an a element.

0

How about this one? This working in <ul> block:
<li class="valid nav-item"><a href="http://www.google.com">Click for Search</a></li>

I copied from the post of Valid <li> Link by user "ryanr".

0

In order to fix this for accessibility issues where I had <a> nested inside <li role="tab"> I legitimately had to remove the <ul> and <li> from the equation. My tabs are now <a role="tab"> nested directly in a <div role="tablist"> which is wild to me, but the roles on those elements seem to be doing the job.

-1

How to make the HTML link activated by clicking on the <li> ?

By making your link as big as your li: just move the instruction

display: block;

from li to a and you are done.

That is:

#menu li
{
    /* no more display:block; on list item */

    list-style: none;
    background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
    border: 1px solid #b2b2b2;
    padding: 0;
    margin-top: 5px;
}

#menu li a
{
    display:block; /* moved to link */
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    padding-right:.5em;
    color: #696969;
}

Side note: you can remove "ul" from your two selectors: #menu is a sufficient indication except if you need to give weight to these two rules in order to override other instructions.

3
  • 1
    This doesn't work for me. When I change the display of the <a> link to "block", it puts itself on a different line than the bullet point. Sep 6, 2012 at 22:18
  • Let me refine that response... The behaviour I explain above occurs in Firefox and Opera, but not in Chrome. It works fine in Chrome. Sep 6, 2012 at 22:26
  • What if you keep display: block on both li and a? Otherwise, please post your problem on a separate question.
    – FelipeAls
    Sep 6, 2012 at 22:51
-2

Use jQuery so you don't have to write inline javascript on <li> element:

$(document).ready(function(){
    $("li > a").each(function(index, value) {
        var link = $(this).attr("href");
        $(this).parent().bind("click", function() {
            location.href = link;
        });
    });
}); 
-2

I found a easy solution: make the tag " li "be inside the tag " a ":

<a href="#"><li>Something1</li></a>
2
  • 3
    This is not valid. The only element that may be a child of <ul> is <li> . <a> has to be inside <li> . w3c.github.io/html-reference/ul.html Dec 27, 2018 at 23:58
  • There is not necessarily a connection between validity and functionality. Jan 29, 2019 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.