[CSS] Div - zmiana tła po najechaniu myszką, oraz caly obszar div jako odnośnik Opcje

[partyboyu]

Witam, otóż chciałbym wykonać menu dokładnie tak samo działające jak menu "Kategorie Youtube" na stronie głównej yt.
Dla mojej witryny, obecnie znajduje sie taki kod:

css

Kod

#kategorie li {
    font-size: 12px;
    padding: 7px 2px 7px 18px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

html

Kod

<div id="kategorie">
<ul>
       <li><a href="{[var:$settings['siteurl']]}/category/26/GT_and_prototypes/1.html">GT and prototypes</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/27/Single_seaters/1.html">Single seaters</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/28/Rally/1.html">Rally</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/29/Touring/1.html">Touring</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/30/Stock_cars/1.html">Stock cars</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/31/Motorbikes/1.html">Motorbikes</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/32/Drift/1.html">Drift</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/33/Vintage/1.html">Vintage</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/34/Club_racing/1.html">Club racing</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/35/School_and_educational/1.html">School and educational</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/36/Others/1.html">Others</a></li>
</ul>
</div>

Interesuje mnie dokladnie taki sam efekt ja na youtubie, ze caly obszar div-a dziala jako odnosnik a dodatkowo po najechaniu zmienia sie cale tlo, nie interesują mnie odsylacze obrazkowe.

Bede dozgonnie wdzieczny za jaka kolwiek pomoc, a moze da sie to zrobic w inny sposob?
Pozdrawiam

[partyboyu]

niewiem jak to zrobic, narazie efekty sa takie jakie sa, sami sprawdzcie,

CSS:

Kod

#kategorie li {
    padding: 7px 2px 7px 18px;
    font-size: 12px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

#kategorie li a:hover {
              background-color: #1C1C1C;
    padding: 7px 2px 7px 0px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B
}

natomiast w HTML nic nie zmienialem
no niby prostwe ale niekumam, moze to przez moj wiek (IMG:style_emoticons/default/wink.gif)

Ten post edytował partyboyu 30.03.2012, 22:27:34