HTML: li and a href

Question

So i have styled my ul li, it comes in a dropdown box and when you mark over each li it a:hover with purple. Now in each li there´s a name. I want to make it all a link, so when you click anywhere in the marked li you go to the link.

Right now, when you click somewhere in the li nothing happens, only if you click on the name IN the li..

Here's my code:

  echo '<a href="profil.php?id='.$result->id.'"><li onClick="fill(\''.addslashes($result->full_name).'\');">'.$result->full_name.'</li></a>';

How do i do this?

    .suggestionsBox {
    position: absolute;
    left: 0px;
    top: 10px;
    margin: 26px 0px 0px 0px;
    width: 200px;
    padding:0px;
    background-color: #000;
    border-top: 3px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList ul li {
    list-style:none;
    margin: 0px;
    padding: 6px;
    border-bottom:1px dotted #5a2156;
    cursor: pointer;
}
.suggestionList ul li:hover {
    background-color: #5a2156;
    color:#000;
}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    padding:0;
    margin:0;
}

Answer 1

The A element can only contain level elements and LI is only allowed in OL and UL. But LI allows A inside, so make it the other way round:

echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

To make the A fill the available space, display it as block element:

li > a {
    display: block;
}