How can I make an HTML list item and its background a link?

I made a list (%26lt;ul%26gt;) with css and html. It's simply a navigation bar with no bullets and a background that looks like a button. The text is clickable but the button behind the text (a background image of the list item) is not. I want to make it clickable with the same link the text has. I can use PHP if I need to.How can I make an HTML list item and its background a link?
Add %26lt;a%26gt; tags to the listitems and then use CSS to resize them to the complete area of the listitem.

Gonna need to turn %26lt;a%26gt; into a block element though.. as inline elements can't normally have a height.



example:



a.menuitem {

display: block;

width: 100%;

height: 100%;

}

....

....

%26lt;li%26gt;%26lt;a class=';menuitem'; href=';#';%26gt;Text%26lt;/a%26gt;%26lt;/li%26gt;





Hope this works for youHow can I make an HTML list item and its background a link?
First you need valid html.

---

%26lt;ul class=';link-list';%26gt;

%26lt;li%26gt;%26lt;a href=';#link1';%26gt;Link1%26lt;/a%26gt;%26lt;/li%26gt;

%26lt;li%26gt;%26lt;a href=';#link2';%26gt;Link2%26lt;/a%26gt;%26lt;/li%26gt;

%26lt;li%26gt;%26lt;a href=';#link3';%26gt;Link3%26lt;/a%26gt;%26lt;/li%26gt;

%26lt;li%26gt;%26lt;a href=';#link4';%26gt;Link4%26lt;/a%26gt;%26lt;/li%26gt;

%26lt;/ul%26gt;



Secondly you need valid CSS.

---

ul.link-list li{

list-style: none;

position: relative;

display: block;

}

ul.link-list li a {

display: block;

padding: 5px 5px 5px 25px;

width: 75px;

height: 25px;

background-image: url(pathtobackgroundimage.gif);

background-repeat: no-repeat;

background-position: left top;

}



Basically I make the list items block elements with no list-style.

I make the links block elements with a background image set to the left. I add extra padding to the left so the text doesn't overlap the background.

male pornstars perform for so

cat