Just nu i M3-nätverket
Jump to content

Overlay meny


Diver Girl

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...