Question

Possible Duplicate:
Navigation hyperlinks only work when mouse is on the text

Can you set a link to the whole width of an < li > instead of just where the text is?

This is what I mean, I want the user to be able to click on anywhere on the button and go to the link and not just the text: http://jsfiddle.net/b7S4L/

One of the problems is that I cannot use display: block; because I have a number after the < a > link for example (1)

Answer 1

I don’t want the number on the right to be on a seperate line that’s
the problem, it should be on the right of the Text

I think I understand what you’re trying to do here. Though, I’m not sure because your question has been quite confusing..

First, do set display: block on the a. That is the right thing to do here.

Then, move the number inside the a, and add a span inside:

<li class="cat-item cat-item-147">
    <a href="http://test.vps.graenseguiden.dk/newscat/food/" title="Vis alle indl&#230;g i kategorien Food">
        <span>Food</span> (4)
    </a>
</li>

Then, some extra CSS is needed. You should merge the new CSS with what you already have – for the demo, I’ve added it within the HTML pane for simplicity (marked with <!--new css right here-->):

http://jsfiddle.net/thirtydot/b7S4L/3/

div.gg_newscats li a {
    display: block;
    padding: 16px 0;
    color: #333
}
div.gg_newscats ul li {
    padding-top: 0;
    padding-bottom: 0
}
div.gg_newscats li a span {
    color: #cc0014
}
div.gg_newscats li a:hover {
    text-decoration: none
}
div.gg_newscats li a:hover span {
    text-decoration: underline
}

The messing around with span and :hover is to keep the colour and underline exactly as you had it.