Elikkä pudotusvalikossa ois sellainen ongelma, että haluan pudotusvalikon neljän päävalikon olevan samankokoisia, (25% koska niitä on 4), ja haluaisin alavalikoiden olevan samankokoisia oman "äitivalikkonsa" kanssa. Sain päävalikon toimimaan kuten halusin yhdessä vaiheessa mutta ongelmana on se että alivalikot eivät toimi kuten pitäisi, enkä saa niitä toimimaan kuten haluaisin.
Tässä olisi käyttämäni CSS koodi pätkä jonka löysin netistä ja sovelsin.
[quote]ul {
margin: 0;
padding: 0;
font-size: 14px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
position: relative;
}
ul li {
display: block;
width: 25%;
position: relative;
float: left;
}
li ul {
display: none;
position: absolute;
float: left;
}
ul li a {
border-top: 1px solid #ffffff;
padding: 15px;
background: #999999 none repeat scroll 0% 50%;
line-height: 1.5em;
display: block;
text-decoration: none;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #8cd749 none repeat scroll 0%;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
position: absolute;
}
li:hover a {
background: #999999 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #8cd749 none repeat scroll 0% 50%;
}
[/quote]
Tässä olisi käyttämäni CSS koodi pätkä jonka löysin netistä ja sovelsin.
[quote]ul {
margin: 0;
padding: 0;
font-size: 14px;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
position: relative;
}
ul li {
display: block;
width: 25%;
position: relative;
float: left;
}
li ul {
display: none;
position: absolute;
float: left;
}
ul li a {
border-top: 1px solid #ffffff;
padding: 15px;
background: #999999 none repeat scroll 0% 50%;
line-height: 1.5em;
display: block;
text-decoration: none;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #8cd749 none repeat scroll 0%;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
position: absolute;
}
li:hover a {
background: #999999 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #8cd749 none repeat scroll 0% 50%;
}
[/quote]
Vastaukset 1
Vanhimmat
Pelkkä CSS ei vielä riitä. Pitäisi nähdä mihin merkkaukseen yrität sitä soveltaa. Myös tarkempi kuvaus toimimattomuudesta, sekä tietoa siitä millä selaimilla toimimattomuus esiintyy. Kuten aina, parasta olisi rakentaa demosivu ongelmasta ja julkaista sen URL...