Hallo zusammen!
ich hab da ein Problem mit meinem aufklappbaren Sidebar. Ich habe Ihn mithilfe der Selfhtml Seiten erstellt.
In Firefox funktioniert er prima und alle Unterpunkte entfalten sich beim drüberhovern. Im Internetexplorer entfalten sich zwar die Punkte, wenn man jedoch nach unten hovert dann klappt sich der Balken wieder ein...
Gibts da eine Lösung oder kann der IE das einfach nicht?
Hier mal die CSS Formatierung und der HTML - Teil:
div#Tmenu {
font-size: 100%;
width: 120px;
padding: 0px 0px 0px 0px;
background-color: #333333;
}
* html div#Tmenu {
width: 120px;
w\idth: 120px; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation {
margin:0px; padding: 0px;
text-align: left;
background-color: #333333;
}
ul#Navigation li {
list-style: none;
position: relative;
margin-top: 1px; padding: 0px;
}
* html ul#Navigation li {
margin-right: 0px; /* Platz fuer Link-Verbreiterung im IE reservieren */
margin-top: 1px;
}
ul#Navigation li ul {
margin: 0px;
padding: 0;
position: absolute;
top: 0;
left: 138px;
}
*:first-child+html ul#Navigation li ul {
left: 138px; /* (IE 7 in standards-compliant mode) */
}
ul#Navigation li ul li {
margin-bottom: 1px; padding-left: 5px;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 120px;
font-family: Arial;
font-size:13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid;
border-left-color: #555555;
border-top-color: #555555;
border-bottom-color: #555555;
border-right-color: #555555;
color: #FFFFFF;
background-color: #151515;
cursor: pointer;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 120px;
w\idth: 120px; /* (IE 6 in standards-compliant mode) */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell:hover {
background-color: #818181;
}
li a#aktuell {
background-color: #151515;
}
ul#Navigation li ul span {
color: white; background-color: #818181 ;
}
ul#Navigation li a:active {
color: white; background-color: #818181;
}
/* dynamisches Ein-/Ausblenden */
ul#Navigation li ul {
display: none;
}
ul#Navigation li:hover>ul {
display: block;
}
ul#Navigation>li:hover>a {
width: 120px;
background: #818181; url(pfeil.gif) no-repeat center right;
}
* html ul#Navigation li.hoverIE {
margin-right: 0px; /* reservierten Platz freigeben */
margin-bottom:-1.15em;
}
* html ul#Navigation li.hoverIE ul {
display: block;
}
* html ul#Navigation li.hoverIE {
width: 120px;
w\idth: 120px; /* (IE 6 in standards-compliant mode) */
background: #e00 url(pfeil.gif) no-repeat center right;
}
<div id="Tmenu">
<ul id="Navigation">
<li><a id="aktuell" href="#Beispiel"> Kurse</a>
<ul>
<li><a href="#Beispiel">Gewicht zuviel?</a></li>
<li><a href="#Beispiel">Step</a></li>
<li><a href="#Beispiel">Tank</a></li>
<li><a href="#Beispiel">Aerobic</a></li>
</ul>
</li>
<li><a href="#Beispiel"> Nahrung</a></li>
<li><a href="#Beispiel">Früchte</a>
<ul>
<li><a href="#Beispiel"> Banane</a></li>
<li><a href="#Beispiel"> Apfel Mark Eberhard</a></li>
</ul>
</li>
</ul>
</div>