Pakko nyt tänne tulla kysymään osaavammilta neuvoa. Rakennan alkeellisella kielellä sivustoa, jonne on tarkoitus saada alasliukuva valikko. Nyt tuli probleema kun valikko aukeaa alas, niin ensimmäisen linkin saa auki, mutta tämän alle tulleen linkin päälle ei saa hiirtä ennen kuin valikko sulkeutuu..
Tässä kyseinen sivu:
http://www.tintinpienhevoset.fi/kokeilut/valikko/testi2.html
ja ongelman huomaa kun kursorin laittaa "hevoset" valikon kohtaan. Alemman linkin päälle ei siis kursoria saa kun valikko katoaa. Itse epäilen että missä itse sivun teksti on, niin on valikkoa "vahvempi" ja näin peittää linkin alleen, mutta en saa ongelmaa millään korjattua, kun en ymmärrä missä kohtaan vika on. Osattaisiinkohan täällä neuvoa?
Tässä vielä CSS-tiedosto.
/* culture shock: grass stains by pogy366 - Sept. 2005 */
/******* structure and layout *******/
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #000000;
background: #B4B8B7;
margin:10px 0 0 0;
padding:0 0 0 0;
background: #efefef url(bg.gif);
text-align:center;
}
.wrap {
position:relative;
width:780px;
margin:0 auto;
padding:0 0 0 0;
text-align:center;
background: #ffffff url(otsake.jpg) no-repeat;
border-left:1px solid #9EB874;
border-right:1px solid #9EB874;
border-top:1px solid #9EB874;
}
.header {
position:relative;
clear:none;
width:770px;
height:25px;
margin:100px 0 0 0;
padding:0 0 0 0;
background:transparent;
color:#ffffff;
text-align:right;
}
.topnav {
position:relative;
clear:both;
width:780px;
height:21px;
margin:0 0 0 0;
padding:0 0 0 0;
background:#cccccc;
font-size:8pt;
}
.container {
position:relative;
clear:both;
width:760px;
margin:10px 10px 0 10px;
padding:0 0 0 0;
background:transparent;
color:#000000;
text-align:left;
}
.news_right {
position:relative;
float:right;
clear:both;
width:200px;
margin:0 0 5px 10px;
padding:0 10px 0 10px;
background:#CFD9BE;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:8pt;
}
.news p {
margin:10px 10px;
}
.news_cnr_top {
background:url(cnr_tr.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
.news_cnr_bottom {
background:url(cnr_br.gif) no-repeat top right;
margin:0 -10px 0 -10px;
}
img.cnr {
width:8px;
height:8px;
border:none;
display: block !important;
}
.footer {
position:relative;
clear:both;
width:780px;
margin:20px 0 0 0;
padding:4px 0 4px 0;
background:#ffffff;
font-size:8pt;
text-align:center;
border-top:1px solid #9EB874;
border-bottom:1px solid #9EB874;
}
/******* top navigation *******/
#nav ul{
padding:0 0 0 0;
margin:0 0 0 0;
font-size:8pt;
color:#ffffff;
float:left;
width:100%;
background:#ffffff url(topnav_bg_grey.gif);
list-style:none;
}
#nav ul li{
float:left;
}
#nav ul li a{
padding: .25em 2em .3em 1em;
display:block;
background:#ffffff url(topnav_bg_grey.gif);
color: #000000;
text-decoration:none;
border-right:1px solid #cccccc;
}
#nav ul li a:hover {
background:#8DA8D5 url(topnav_bg_green.gif);
color: #ffffff;
text-decoration:none;
border-right:1px solid #cccccc;
}
#nav ul ul {
position:absolute;
display:none;
}
#nav ul li ul {
position:absolute; top:auto;
display:none;
width:130px;
height:21px;
background:#ffffff url(topnav_bg_grey.gif);
background-repeat:no-repeat;
color: #000000;
text-decoration:none;
border-right:1px solid #cccccc;
}
#nav ul li:hover ul {
display:block;
text-align:left;
margin:0px;
padding:0px;
}
#nav ul li:hover ul li {
clear:both;
display:block;
width:130px;
}
#nav ul li:hover ul li a {
background:#8DA8D5 url(topnav_bg_grey.gif);
color: #000000;
text-decoration:none;
border-right:1px solid #cccccc;
}
#nav ul li:hover ul li a:hover {
background:#8DA8D5 url(topnav_bg_green.gif);
color:#ffffff;
}
/******* links *******/
a {
color:#D3812D;
text-decoration:underline;
}
a:hover {
color:#E39243;
text-decoration:none;
}
#news a {
color:#D3812D;
text-decoration:underline;
}
#news a:hover {
color:#E39243;
text-decoration:none;
}
#footer a {
color:#9EB874;
text-decoration:none;
}
#footer a:hover {
color:#4F6C1F;
text-decoration:none;
}
/******* fonts and colors *******/
.header strong {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#ffffff;
font-size:13pt;
letter-spacing:.7em;
}
.news_title {
font-family:Arial, Helvetica, sans-serif;
color:#65764B;
font-size:10pt;
font-weight:bold;
}
.page_title {
font-family:Arial, Helvetica, sans-serif;
color:#697D55;
font-size:10pt;
font-weight:bold;
padding: 0 0 0 0;
margin: 0 0 -8px 0;
}
.page_text {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
font-size:9pt;
font-weight:normal;
}
/******* images *******/
img {
border:none;
}
.right img{
position:relative;
float:right;
padding:0 0 0 0;
margin:5px 2px 2px 5px;
}
.left img{
position:relative;
float:left;
padding:0 0 0 0;
margin:0 5px 0 2px;
}
/******* workarounds and hacks *******/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */Anna .topnav sääntö z-index: 1; jottei sisällön elementit (ensimmäisenä otsikko) tule valikon päälle, jottei puolestaan :hover siirry väärään elementtiin.
Kiitos paljon, nyt pelaa! :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.