Apfelkuchen
Mitglied
Hallo, ich arbeite gerade an einer HP für einen Freund und stecke fest beim folgenden Problem:
Die Navigation habe ich mit CSS gelöst, es ist sowas wie ein Drop down menü, nur mit zwei horizontalen Ebenen:
http://www.farukp.com/upload/ptmw/index.html
Hier mein Problem:
Unter FF habe ich alles mit CSS schön angepasst, aber leider schaut das unter IE nicht so aus. Das menü funktioniert zwar unter IE, aber leider ist die Optik nicht mehr die gleiche. Könnt ihr mir helfen?
Anbei mein CSS Code:
Die Navigation habe ich mit CSS gelöst, es ist sowas wie ein Drop down menü, nur mit zwei horizontalen Ebenen:
http://www.farukp.com/upload/ptmw/index.html
Hier mein Problem:
Unter FF habe ich alles mit CSS schön angepasst, aber leider schaut das unter IE nicht so aus. Das menü funktioniert zwar unter IE, aber leider ist die Optik nicht mehr die gleiche. Könnt ihr mir helfen?
Anbei mein CSS Code:
Code:
body {
font: normal 10px verdana;
}
#nav {
margin: -2;
padding: 0;
}
#nav li.on ul, #nav li.off ul {
margin: 0;
padding: 0;
}
#nav a {
text-decoration: none;
}
#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 1px;
}
#nav li ul {
display: none;
}
#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 27px;
*top: 30px;
left: 6px;
padding-top: 5px;
background: #CCCCCC;
height: 26px;
width: 761px;
}
#nav li a {
color: #000000;
font-weight: bold;
display: block;
height: 10px;
width: 114px;
border: 1px solid #CCCCCC;
padding: 5px;
}
#nav li.on a {
border: 1px solid #000000;
color: #7a8566;
}
#nav li.on ul a, #nav li.off ul a {
float: left; /*ie doesn't inherit the float*/
border: 0;
color: #000000;
width: auto;
margin-right: 15px;
}
#nav li.on ul {
display: block;
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
background: #CCCCCC;
color: #29497b;
} {
}
