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

Answer 2

I'm not sure you should put an <li> inside an anchor <a> like that. If you want the whole line to be clickable just put the <a> inside of the <li> and it should take up the right width. if not, give it a set height and width and the <li> should fit tightly around it, making it all clickable.

so like:

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

and then the css:

a{height : 20px;}

<a> is inline so its width cannot be set but it will wrap tightly around it's text.

Answer 3

First, a li element must be a direct child of a ul element, so you have to have the a tag inside the li tags.

Here is how I would construct the HTML / CSS; incorporate it into your php however you think it would work best.

<ul>
  <li><a href="#"><span class="list1">Content 1</span></a></li>
</ul>

.list1 {width: 120px;} /* Set this to whatever width you want the list to fill*/