Как да направя HTML връзката активирана чрез щракване върху ‹li›?

Както каза Marineio, можете да използвате атрибута onclick на <li>, за да промените location.href чрез javascript:

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

Като алтернатива можете да премахнете всякакви полета или подложки в <li> и да добавите голяма подложка към лявата страна на <a>, за да избегнете преминаването на текст над водещия символ.

Само за да пусна тази опция там:

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

Това е стилът, който използвам в моите менюта, той прави самия елемент от списъка хипервръзка (подобно на това как човек би направил връзка към изображение).
За стилизиране обикновено прилагам нещо подобно:

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

След това мога да приложа всякакъв стил върху „li›, който желая.

Забележка: Валидаторите ще се оплачат от този метод, но ако сте като мен и не основавате живота си около тях, това трябва да работи добре.

Просто добавете обвиване на текста на връзката в таг 'p' или нещо подобно и добавете поле и подложка към този елемент, по този начин това няма да повлияе на настройките, които MiffTheFox ви е дал, т.е.

<li> <a href="/bg#"> <p>Link Text </p> </a> </li>

Това ще направи целия <li> обект като връзка:

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

Следното изглежда работи:

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

jqyery това е друга версия с jquery, малко по-малко по-кратка. ако приемем, че елементът <a> е вътре в елемента <li>

$(li).click(function(){
    $(this).children().click();
});

Или можете да създадете празна връзка в края на вашия <li>:

<a href="/bglink"></a>

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

Това ще създаде пълен <li> с възможност за кликване и ще запази форматирането ви върху истинската ви връзка. Може да бъде полезно и за <div> таг

Anchor href връзката се прилага към li:

#menu li a {
       display:block;
    }

Можете да опитате събитие "onclick" вътре в тага LI и да промените "location.href", както в javascript.

Можете също така да опитате да поставите таговете li в таговете a, но това вероятно не е валиден HTML.

a {
  display: block;
  position: relative;
}

Мисля, че това е всичко, от което се нуждаеш.

Как да направя HTML връзката активирана чрез щракване върху ‹li› ?

Като направите връзката си толкова голяма, колкото вашия li: просто преместете инструкцията

display: block;

от li до a и сте готови.

Това е:

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

Странична бележка: можете да премахнете "ul" от вашите два селектора: #menu е достатъчна индикация, освен ако трябва да придадете тежест на тези две правила, за да замените други инструкции.

Намерих лесно решение: направете тагът „li“ да бъде вътре в тага „a“:

<a href="/bg#"><li>Something1</li></a>

Използвайте jQuery, за да не се налага да пишете вграден javascript на <li> елемент:

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