Hilfe........... :shock:
habe folgendes problem.
Für eine Bekannte hab ich ne schicke Website gebastelt mit horizontalem Drop down Menü welches schick nach unten aus klappt.
Wenn man über den zweiten Menüpunkt "Kursarten" fährt,fährt dieser schön runter.Fährt man dann über das Menü klappt der erste Menüpunkt gleichzeitig nach rechts aus und gibt zwei weitere Menüpunkte frei.
In der Vorschau von Scriptly funktioniert funktioniert das auch supi.
Öffne ich die Seiten allerdings direkt mit dem Explorer bzw. dem Firefox funktioniert es nicht mehr???
Kann wer helfen? Bin für jede Hilfe dankbar.
Hier mal meine Codes:
Code
<div id="steuerung-oben">
<ul>
<li><a href="index.htm">
Home</a>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li><a href="ueber-mich.htm">Über mich</a></li>
<li><a href="galerie.htm">Galerie</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="kurse.htm">
Kursangebote</a> </li>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li class="rechts"><a href="entspannung.htm">Entspannungskurse</a>
<ul class="rechts">
<li class="rechts"><a class="rechts" href="at.php">Autogenes Training</a></li>
<li class="rechts"><a class="rechts" href="pmr.php">Progressive Muskelrelaxation</a></li> </ul>
<li><a href="reiki.htm">Reiki</a></li>
<li><a href="stone.htm">Hot Stone Massage</a></li>
<li><a href="senioren.htm">Seniorengymnastik</a></li>
<li><a href="ergo.htm">Ergotherapie</a></li>
<li><a href="wirbelsaeule.htm">Wirbelsäulenaufrichtung</a></li>
</ul>
</li>
</ul>
<ul><!-- öffnet den dritten Themenblock -->
<li><a class="direkt" href="anmeldung.php">Anmeldeformular</a></li>
</ul><!--schließt den dritten Themenblock-->
<ul><!-- öffnet den dritten Themenblock -->
<li><a class="direkt" href="gaestebuch.php">Gästebuch</a></li>
</ul><!--schließt den dritten Themenblock-->
</div>[code]
und hier css
[code]/* ab hier für Klappnavi vertikal */
#steuerung-oben {
width: 100%;
/*padding: 0 20px; */
background-color: #F5E64B;
font-size: 1em;
line-height: 1.5;
float: left;
}
#steuerung-oben ul {
float: left;
width: 200px;
list-style-type: none;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#steuerung-oben a {
text-decoration: none;
display: block;
border: 1px solid #F5E64B;
text-align: center;
background-color: #F5E64B;
color: #B4322C;
}
/*--definiert die "Drop-Down-Links" im Hoverzustand--*/
#steuerung-oben a:hover {
/*color: #ff9224; */
/*background: #003366; */
border: 1px solid #B4322C;
}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#steuerung-oben li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#steuerung-oben ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#steuerung-oben ul li:hover ul {
display: block;
border: 1px solid #B4322C;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #steuerung-oben ul li{
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #steuerung-oben ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #steuerung-oben ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#steuerung-oben a.direkt:link {
font-size: 1em;
text-align: center;
color: #B4322C;
border: 1px solid #F5E64B;
background: #F5E64B;
/*margin-top: 16px; */
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#steuerung-oben a.direkt:hover {
color: #B4322C;
background:#F5E64B ;
border: 1px solid #B4322C;
}
/*#F5E64B*/
/*----------------------ab hier für rechts raus fahren--------------------------------------------------------*/
#steuerung-oben .rechts {
width: 140px;
/*padding: 0 20px; */
background-color: #F5E64B;
font-size: 1em;
line-height: 1.5;
float: left;
}
#steuerung-oben ul.rechts {
width: 180px;
list-style-type: none;
}
/*--definiert die "Ausklapp-Links" im Normalzustand--*/
#steuerung-oben a.rechts {
text-decoration: none;
display: block;
border: 1px solid #F5E64B;
text-align: center;
background-color: #F5E64B;
color: #B4322C;
}
/*--definiert die "Ausklapp-Links" im Hoverzustand--*/
#steuerung-oben a.rechts:hover {
/*color: #ff9224;
background: #003366;*/
border: 1px solid #B4322C;
}
/*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#steuerung-oben li li.rechts {
position: relative;
}
/*--versteckt die "Ausklapp-Links", solange nicht gehovert wird--*/
#steuerung-oben ul ul ul.rechts {
position: absolute;
top: 0px; left: 200px; z-index: 2;
display: none;
}
/*--lässt die Ausklapp-Links beim Hovern erscheinen--*/
#steuerung-oben ul ul li.rechts:hover ul.rechts {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #steuerung-oben ul ul li.rechts{
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #steuerung-oben ul ul li.rechts {
float: left;
width: 100%;
}
*+ html #steuerung-oben ul li li.rechts {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #steuerung-oben ul li a.rechts {
height: 1%;
}