Overlay meny

[Diver Girl]

Hej

Jag har stött på ett problem som jag gärna vill ha hjälp med. Jag har googlat en del och förstår att det här är ett problem, men jag hittar ingen lösning.

 

Jag har en dropdown där jag ska kunna göra språkval.

Under den har jag en meny.

 

Hur jag än gör så ligger menyn över språkvals-dropdownen, vilket innebär att när jag hovrar bland språken aktiveras givetvis min menyknapp istället.

 

Hur kan jag komma runt det här?

 

Jag visar min css (html koden är helt vanliga ul-listor):

 

/**************************************************/
/*language selection*/
/**************************************************/

#language-wrapper{
margin:0 auto;
padding:0;
margin-top:10px;
width:960px;
height:20px;
}

#language {
padding: 0;
margin: 0;
list-style: none;
width:90px;
float:right;
}

#language ul {
list-style:none;
}

#language li {
float: left;
position: relative;
width: 90px;
padding-top:1px;
padding-bottom:1px;
/*border:1px solid #ffffff;*/
color:#ffffff;
text-transform:uppercase;
font-size:9px;
}

ul#language li a {
font-family:Futura MD, Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
text-transform:uppercase;
text-decoration:none;
color:#ffffff;
font-weight:normal;
}

ul#language li:hover ul li a {
color:#ffffff;
}

#language li ul {
list-style: none;
display: none;
position: absolute; 
margin:0;
top: 14px;
left: 0;
background:#555555;
/*border-top:1px solid #ffffff;*/
}

#language li ul li {
text-align:left;
padding-top:5px;
padding-bottom:1px;
padding-left:1px;
width:90px;
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
background:#555555;
}

#language li ul li a{
font-family:Futura MD, Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}

#language li:hover ul { 
display: block; 
}

/**************************************************/
/*headmenu*/
/**************************************************/

#menu {
padding: 0;
margin: 0;
list-style: none;
width:960px;
}

#menu li {
float: left;
position: relative;
width: 160px;
padding-top:25px;
padding-bottom:20px;


}

#menu li:hover {
float: left;
position: relative;
width: 160px;
padding-top:25px;
padding-bottom:19px;
background:#4b87c5;
}

ul#menu li a {
font-family:Futura MD, Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
text-transform:uppercase;
text-decoration:none;
color:#000000;
font-weight:normal;
}

ul#menu li:hover a {
color:#ffffff;
}

ul#menu li:hover ul li a {
color:#000000;
}


#menu li ul {
list-style: none;
display: none;
position: absolute; 
top: 56px;
left: 0;
border-top:1px solid #4b87c5;
}

#menu li ul li {
text-align:left;
padding-top:9px;
padding-bottom:7px;
padding-left:10px;
width:200px;
border-bottom:1px solid #4b87c5;
border-left:1px solid #4b87c5;
border-right:1px solid #4b87c5;
background:url(../images/nav-ul-transp.png);
}

#menu li ul li a{
font-family:Futura MD, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
/*color:#000000;*/

}

#menu li ul li:hover {
text-align:left;
padding-top:9px;
padding-bottom:7px;
padding-left:10px;
width:200px;
}

#menu li ul li:hover a {
font-size:11px;
color:#ffffff;
}

ul#menu li:hover ul li:hover a {
color:#ffffff;
}


#menu li:hover ul { 
display: block; 
}

 

Jag skulle vara så tacksam om någon kunde hjälpa mig lösa det här, för jag har verkligen kört fast

 

/Malin

[Kim..]

Hur jag än gör så ligger menyn över språkvals-dropdownen, vilket innebär att när jag hovrar bland språken aktiveras givetvis min menyknapp istället.

 

Kolla lite på z-index som man kan sätta på element, observera att det bara fungerar på positionerade element. Du kan läsa mer här: http://www.w3schools.com/Css/pr_pos_z-index.asp

 

 

K.

[Diver Girl]

Som du ser i koden har vissa element/block redan position absolute.

Dessa har jag försökt sätta z-index på utan framgång.

[Kim..]

Kanske kan posta html-koden också, svårt att se hur det tillämpas annars.

[Diver Girl]

Ja, det kan jag göra, fast det får vänta tills i morgon när jag kan nå min kod.

Annars är det inga konstigheter där. Det är två helt vanliga ul-listor, med underordnade ul-listor. Vad de har för id ser du på css-koden.

 

/Malin