Firefox не отображает элемент списка как ссылку

Question

Я никогда раньше не сталкивался с этой проблемой, и она меня раздражает. У меня есть список, который при наведении курсора появляется вокруг него. У меня есть список, подобный следующему

<div id="sidebar">
    <h2>Our Services</h2>

    <ul>
        <a href="furniture.php"><li>Furniture</li></a>
        <a href="kitchens.php"><li>Kitchens</li></a>
        <a href="bedrooms.php"><li>Bedrooms</li></a>
        <a href="flooring.php"><li>Flooring</li></a>
        <a href="externaljoinery.php"><li>External Joinery</li></a>
        <a href="commercialwork.php"><li>Commercial Work</li></a>
        <a href="staircases.php"><li>Staircases</li></a>
        <a href="tiling.php"><li>Tiling</li></a>
    </ul>
</div>

Но по какой-то причине Firefox не отображает весь элемент списка в виде ссылки, только текст. Он работает в других браузерах (даже в IE), но не в Firefox.

Answer 1

Изменить

<a href="furniture.php"><li>Furniture</li></a>

На

<li><a href="furniture.php">Furniture</a></li>

Внутри UL вы должны иметь LI элементов, а не что-нибудь еще.Однако внутри LI вы можете иметь другие теги, такие как A

Обновление

Вы можете установить стиль A в display:block какmwgriffith предлагается в комментариях.

или для того, чтобы сделать всю строку ссылкой, вы также можете назначить событие click для LI, , вот пример использования jQuery

Answer 2

Я понял это, вместо отображения <li> фона, который я использовал display:block в тегах <a> и использует a:hover для создания фона.