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

html css menu html-lists anchor
San picture San · Jul 13, 2009 · Viewed 302.8k times · Source

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;
}

Answer

MiffTheFox picture MiffTheFox · Jul 13, 2009 
#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.

Related questions

How do I center align the items in my menu?

How do I center align the items WITHIN in my menu? (The lis) I managed to center the menu (ul) within the page of my website but I can't center the actual items in the menu (Home, About, etc.) You …

Read More
How to make a HTML list appear horizontally instead of vertically using CSS only?

I need this because I want to make a menu (which is made from a HTML list) appear horizontally. I prefer not to use absolute positioning since it might become messy when I start changing the layout of the page. …

Read More
How to make a 3-level collapsing menu in Bootstrap?

I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level. This is the two level menu which I have: I thought something like this would work: <link href="https://stackpath.…

Read More