Terve
Osaisiko kukaan auttaa minua tälläisessa ongelmassa. Olen tekemässa valikoita ja haluaisin valikoihin taustakuvan. Teksti säilyisi valikoissa, sinne pitäisi laittaa jonkinlainen tausta. Eri tausta ylhäällä olevissa valikoissa ja eri tausta avautuvissa valikoissa.
tässa koodia mitä olen luonut.
html:
<div class="drop"> <ul> <li><a href="#">menu</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </li> </ul> </div>
css:
body{
background-color: #666666;
}
.drop{
padding: 0;
margin: 0;
font-family: Arial;
}
body {
left: 130px;
top: 50px;
font-size: 10px;
position: absolute;
text-align: center;
}
body {
behavior: url(csshover.htc);
}
ul {
list-style: none;
}
ul a {
color: #666666; /*tekstin vari*/
text-decoration: none;
display: block;
padding: 2px 2px 2px 0px; /*valikoiden koko*/
width: 120px;
background: #ffffff; /*valikon taustavari*/
}
ul a:hover {
/*color: #ffffff; /*muuttaa valikon tekstin varia kun se aktivoituu*/
text-decoration: none;
/*background: #000000; /*muuttaa valikon varia kun se aktivoituu*/
background-image:url(images/menubackground.jpg);
width:106px;
height:19px; !!!TäSSA ON JOKU ONGELMA!!!!
}
ul li {
border-bottom: 1px solid #ffffff; /*pudotusvalikoiden valiviivojen vari*/
border-right: 1px solid #FFF;
float: left; /*poistamalla tama, lista muuttuu vertikaaliseksi*/
position: relative;
}
ul li ul {
list-style: none;
position: absolute;
left: 0;
top: 100%;
display: none;
width: 125px;
border-top: 1px solid #FFF;
}
ul li:hover ul { display: block; }
ul li:hover ul li ul { display: none; }
ul li ul li:hover ul {
display: block;
position: absolute;
left: 140px;
top: -1px;
border-left: 1px solid #FFF;
}Aihe on jo aika vanha, joten et voi enää vastata siihen.