Ich habe eine Navigation nach folgendem Vorbild gemacht:
http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Leider funktioniert sie nur im FF korrekt und im IE erscheinen die Untermenüs nicht!
Wer kann helfen???? Verzweifle langsam!!!!
Meine CSS:
.white-header {
background-color:#336699;
border-bottom:1px solid #000000;
border-top:2px solid #000000;
color:#000000;
font-family:Freestyle Script;
font-size:24px;
font-weight:bold;
padding:4px;
}
body {
}
a {
color:black;
text-decoration:none;
}
a:hover {
color:white;
text-decoration:none;
}
a.side:hover {
color:#000000;
}
a.white:hover {
color:#DDDDDD;
text-decoration:none;
}
body {
background-color:#CCCCCC;
font-family:Arial;
font-size:12px;
}
form {
margin:0;
}
hr {
border:1px solid black;
height:1px;
width:75%;
}
hr.side-hr {
border:1px solid #000000;
height:1px;
}
td {
font-family:Arial;
font-size:14px;
}
pre {
font-family:Arial;
font-size:11px;
}
.alt {
color:#005599;
}
rand ganz außen-- > .outer-border {
}
.sub-header {
border-bottom:1px solid #000000;
border-top:1px solid #000000;
color:#000000;
font-family:Arial;
font-size:10px;
padding:5px;
}
.full-header {
background-color:#444444;
color:#DDDDDD;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding:0;
}
.footer {
background-color:#99CC33;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
padding:5px;
}
.button {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
height:20px;
margin-top:2px;
}
.textbox {
background-color:#F8F8F8;
border:1px solid #CCCCCC;
color:#555555;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
}
.main-body {
color:#555555;
font-size:14px;
padding:4px 0 5px;
}
.side-body {
background-color:#336699;
color:white;
margin-left:10px;
margin-right:10px;
padding-left:7px;
padding-right:7px;
}
.main-bg {
color:#555555;
padding:10px 5px;
}
.border {
}
.side-border-left {
background-color:#336699;
color:#777777;
}
.side-border-right {
background-color:#336699;
color:#777777;
}
.news-footer {
background-color:#F1F1F1;
color:#555555;
font-size:10px;
padding:3px 4px 4px;
}
.capmain {
background-color:#CCCCCC;
color:black;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:2px 0 4px;
}
.scapmain {
background-color:#336699;
color:#000000;
font-family:Arial;
font-size:14px;
font-weight:bold;
padding:4px;
text-align:center;
}
.tbl-border {
background-color:#E1E1E1;
color:#555555;
}
.tbl {
background-color:#FFFFFF;
color:#555555;
font-size:11px;
padding:4px;
}
.tbl1 {
background-color:#FFFFFF;
color:#555555;
font-size:11px;
padding:4px;
}
.tbl2 {
background-color:#F1F1F1;
color:#555555;
font-size:11px;
padding:4px;
}
.forum-caption {
background-color:#F1F1F1;
color:#888888;
font-size:11px;
font-weight:bold;
padding:2px 4px 4px;
}
.quote {
background-color:#F8F8F8;
border:1px solid #BBBBBB;
color:#555555;
font-size:11px;
margin:0 20px;
padding:4px;
}
.poll {
border:1px solid #BBBBBB;
height:12px;
}
.comment-name {
color:#005599;
font-weight:bold;
}
.shoutboxname {
color:#005599;
font-weight:bold;
}
.shoutbox {
color:black;
display:block;
}
.shoutboxdate {
color:black;
font-size:10px;
}
.small {
font-size:12px;
font-weight:normal;
}
.small2 {
color:#555555;
font-size:12px;
font-weight:normal;
}
.side-small {
color:#555555;
font-size:10px;
font-weight:normal;
}
.side-label {
color:#555555;
padding:2px 2px 3px;
}
#aktiv {
background:#3366ff;
font-variant:small-caps;
font-weight:bold;
}
#aktiv_sub span{
background:#3366cc;
font-variant:small-caps;
font-weight:bold;
display: block;
text-align: center;
border-left: none;
}
table.awec_calendar th {
font-weight:normal;
}
table.awec_calendar td.current {
border:1px solid yellow;
}
table.awec_calendar td.content {
background-color:red;
}
table.awec_calendar td.empty {
background-color:gray;
}
table.awec_calendar td.weekend {
background-color:blue;
}
table.awec_list tr.odd {
background-color:green;
}
table.awec_list tr.even {
background-color:red;
}
table.awec_list tr.current {
background-color:yellow;
}
ul#Navigation {
margin-left: -5px;
}
ul#Navigation li {
background-color:#336699;
border-color:#99CC33;
border-style:solid;
border-width:0 0 1px 15px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-left:-35px;
float: none;
position: relative;
}
ul#Navigation li ul {
position: absolute;
display:none;
}
ul#Navigation li:hover {
border-color:orange;
}
ul#Navigation li:hover ul {
background-color:#336699;
border:2px solid white;
display:block;
position:absolute;
width:100px;
}
ul#Navigation li ul li {
display:block;
float:none;
font-family:freestyle script;
list-style-type:none;
}
ul#Navigation li a {
color:white;
display:block;
font-family:freestyle script;
font-size:24px;
padding:4px 2px 2px 15px;
}
ul#Navigation li a:hover {
display:block;
font-weight:bold;
height:100%;
padding:4px 2px 2px 15px;
text-decoration:none;
}
ul#Navigation li ul li a {
border:medium none;
color:white;
}
ul#Navigation li h3 {
border:medium none;
}
ul#Navigation li ul li {
border:medium none;
}
ul#Navigation li ul li:hover {
border-bottom:1px solid orange;
}
ul#Navigation li ul li a:hover {
font-weight:bold;
text-decoration:none;
}
* html ul#Navigation li {
margin-left: 0px;
}
:first-child + html ul#Navigation li {
}
* html ul#Navigation li ul {
}
:first-child + html ul#Navigation ul {
background-color:silver;
padding-bottom:0.4em;
}
* html ul#Navigation a, * html ul#Navigation span {
}
ul#Navigation a {
display: block;
}
der quellcode der Seite:
<ul id='Navigation'><li><a href="index.php?menu=Aktionen">Aktionen</a></li>
<li><a href="viewpage.php?page_id=10&menu=Über uns">Über uns</a>
<ul>
<li><a href="viewpage.php?page_id=9&menu=Über uns&sub=Leiterrunde">Leiterrunde</a></li>
<li><a href="viewpage.php?page_id=1&menu=Über uns&sub=Vorstand">Vorstand</a></li>
<li><a href="articles.php?menu=Über uns&sub=Chronik">Chronik</a></li>
<li><a href="viewpage.php?page_id=16&menu=Über uns&sub=Presse">Presse</a></li>
</ul>
</li>
<li><a href="viewpage.php?page_id=8&menu=Kälbchen">Kälbchen</a></li>
<li><a href="infusions/slooz_expose/index.php?menu=Bildergallerie">Bildergallerie</a></li>
<li><a href="contact.php?menu=Kontakt">Kontakt</a>
<ul>
<li><a href="weblinks.php?menu=Kontakt&sub=Links">Links</a></li>
<li><a href="anfrage.php?menu=Kontakt&sub=Verleih">Verleih</a>
</li>
</ul>
</li>
<li><a href="infusions/guest_book/guest_book.php?menu=Gästebuch">Gästebuch</a></li></ul>