tyler7osfp
08-05-2010, 01:04 PM
hello. I got a problem with a small navigation menu that i make.
The menu works perfectly with Google Chrome but in IE doen't work
Above is the code from Css and Html file
The css code
.Texta12 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #F0F0F0;
text-decoration: underline
}
ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #FFB8D8;
line-height: normal;
}
li {
float: left;
position: relative;
width: 14em;
line-height: normal;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
line-height: normal;
height: auto;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul {
display: block;
width: 100%;
}
a.norm { background-color: #B60345 ; color: #F0F0F0; }
.over { background-color: #D0F0FF }
a.style2 {
color: #000000;
font-family: Verdana;
font-size: 12px;
font-style: normal;
font-weight: bolder;
}
a.norm2 { color: #F0F0F0; }
.over { background-color: #D0F0FF }
a.style22 {
color: #000000;
font-family: Verdana;
font-size: 12px;
font-style: normal;
font-weight: bolder;
background-color: #B60345;
}
span.norm { background-color: #B60345 ; color: #000000; }
.over { background-color: #D0F0FF }
span.style2 {
color: #000000;
font-family: Verdana;
font-size: 14px;
font-style: normal;
font-weight: bolder;
}
.test {
color: #000000;
}
.style6 {font-weight: normal; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
The html code
<ul><ul><li><span class="Texta12"><a href="www.google.com" class="Texta12" onmouseover="this.className='style2'" onMouseOut="this.className='norm'">Τμήματα και Υπηρεσίες</a>
</span>
<ul >
<li class="Texta12" ><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Ψυχολογική Υποστήριξη</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Λογοθεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Εργοεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Ειδικής Αγωγής</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Φυσικοθεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Πρώιμης παρέμβασης</a></li>
</ul>
</li>
</ul>
</ul>
I probably must change something on th css to make it IE compatible.
The fuctionality is that on hove a drop down list appears.
thank you in advance
The menu works perfectly with Google Chrome but in IE doen't work
Above is the code from Css and Html file
The css code
.Texta12 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #F0F0F0;
text-decoration: underline
}
ul {
padding: 0;
margin: 0;
list-style: none;
background-color: #FFB8D8;
line-height: normal;
}
li {
float: left;
position: relative;
width: 14em;
line-height: normal;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
line-height: normal;
height: auto;
}
li > ul {
top: auto;
left: auto;
}
li:hover ul {
display: block;
width: 100%;
}
a.norm { background-color: #B60345 ; color: #F0F0F0; }
.over { background-color: #D0F0FF }
a.style2 {
color: #000000;
font-family: Verdana;
font-size: 12px;
font-style: normal;
font-weight: bolder;
}
a.norm2 { color: #F0F0F0; }
.over { background-color: #D0F0FF }
a.style22 {
color: #000000;
font-family: Verdana;
font-size: 12px;
font-style: normal;
font-weight: bolder;
background-color: #B60345;
}
span.norm { background-color: #B60345 ; color: #000000; }
.over { background-color: #D0F0FF }
span.style2 {
color: #000000;
font-family: Verdana;
font-size: 14px;
font-style: normal;
font-weight: bolder;
}
.test {
color: #000000;
}
.style6 {font-weight: normal; color: #000000; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
The html code
<ul><ul><li><span class="Texta12"><a href="www.google.com" class="Texta12" onmouseover="this.className='style2'" onMouseOut="this.className='norm'">Τμήματα και Υπηρεσίες</a>
</span>
<ul >
<li class="Texta12" ><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Ψυχολογική Υποστήριξη</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Λογοθεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Εργοεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Ειδικής Αγωγής</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Φυσικοθεραπείας</a></li>
<li class="Texta12"><a onMouseOut="this.className='norm2'" onmouseover="this.className='style22'" href="">Πρώιμης παρέμβασης</a></li>
</ul>
</li>
</ul>
</ul>
I probably must change something on th css to make it IE compatible.
The fuctionality is that on hove a drop down list appears.
thank you in advance