Udskift image i submenu
HejSidder og roder med en detalje i min under menu, som jeg bare ikke kan få løst. Jeg arbejder med en template i Composite CMS, som smider menu- og submenupunkter ud i en usorterede lister. Disse lister kan indsættes med en identifier og herefter tilpasses i et style sheet. So langt så godt.
Jeg har fået en fornuftig placering af min submenu, men vil gerne gøre det mere tydeligt, hvilket punkt brugeren befinder sig på ved at udskifte image i det aktiverede menupunkt. Problemet er bare, at dette punkt ikke længere er et link, så jeg kan ikke bruge a:active eller noget lignende.
Er det muligt at klare den i CSS eller skal jeg ud og rode med javascripts?
Min CSS følger her. Kører denne doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
/****************************************************
S U B M E N U -
Lines for active link:
text-decoration: none;
background-image: url(Media/bullet2_sel.gif);
background-position: 0em;
background-repeat: no-repeat;
****************************************************/
div#SubMenu {
padding:20px 10px 10px 15px;
color:#737176;
text-decoration: none;
}
div#SubMenu ul {
font-size:11px;
font-family: verdana, arial, helvetica, sans-serif;
color: #F58C42;
list-style: none;
margin-left:0;
padding: 0 15px 0 0;
}
div#SubMenu ul li{
padding-top: 2px;
display: block;
padding-left: 15px;
font-size: 11px;
}
div#SubMenu ul ul li {
display: block;
padding-left: 15px;
font-size:11px;
text-decoration:none;
}
div#SubMenu a{
display: block;
padding-left: 15px;
font-size: 11px;
text-decoration: none;
background-image: url(Media/bullet3.gif);
background-position: 0em;
background-repeat: no-repeat;
}
div#SubMenu ul li a:active {
padding-left: 15px;
background-image: url(Media/bullet2_sel.gif);
background-position: 0em;
background-repeat: no-repeat;
color: #000000;
}
