How to make the HTML link activated by clicking on the li

Question

I have the following markup    lt ul id  menu  gt                     lt li gt  lt a href     gt Something1 lt  a gt  lt  li gt       lt li gt  lt a href     gt Something2 lt  a gt  lt  li gt       lt li gt  lt a href     gt Something3 lt  a gt  lt  li gt       lt li gt  lt a href     gt Something4 lt  a gt  lt  li gt   lt  ul gt    The  lt li gt  is a bit big  with a small image on its left  I have to actually click on the  lt a gt  to activate the link   How can I make a click on the  lt li gt  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

User · Answer

This will make whole  lt li gt  object as a link       lt li onclick  location href  page html     style  cursor pointer   gt     lt  li gt

User · Answer

I found a easy solution  make the tag   li  be inside the tag   a      lt a href     gt  lt li gt Something1 lt  li gt  lt  a gt

User · Answer

a     display  block    position  relative     I think that is all you need

User · Answer

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

User · Answer

Anchor href link apply to li    menu li a          display block

User · Answer

Use jQuery so you don t have to write inline javascript on  lt li gt  element     document  ready function           li  gt  a   each function index  value            var link     this  attr  href              this  parent   bind  click   function                 location href   link

User · Answer

How to make the HTML link activated by clicking on the  lt li gt      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

User · Answer

As Marineio said  you could use the onclick attribute of the  lt li gt  to change location href  through javascript    lt li onclick  location href  http   example    gt       lt  li gt    Alternatively  you could remove any margins or padding in the  lt li gt   and add a large padding to the left side of the  lt a gt  to avoid text going over the bullet

User · Answer

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

User · Answer

Just to throw this option out there    lt ul id  menu  gt       lt a href     gt  lt li gt Something1 lt  li gt  lt  a gt       lt a href     gt  lt li gt Something2 lt  li gt  lt  a gt       lt a href     gt  lt li gt Something3 lt  li gt  lt  a gt       lt a href     gt  lt li gt Something4 lt  li gt  lt  a gt   lt  ul gt    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  lt li gt  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

User · Answer

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

User · Answer

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    lt li gt   lt a href     gt   lt p gt Link Text  lt  p gt   lt  a gt   lt  li gt

User · Answer

jqyery this is another version with jquery a little less shorter  assuming that the  lt a gt  element is inside de  lt li gt  element    li  click function          this  children   click

User · Answer

Or you can create an empty link at the end of your  lt li gt      lt a href  link  gt  lt  a gt    menu li position relative padding 0    link       bottom  0       left  0       position  absolute       right  0       top  0      This will create a full clickable  lt li gt  and keep your formatting on your real link  It could be useful for  lt div gt  tag as well

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

Examples related to html

Examples related to css

Examples related to menu

Examples related to html-lists

Examples related to anchor