Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „IE7 - Hover-Menü klappt bei hover sofort wieder zu“

dernorb

Nicht mehr ganz neu hier

hallo leute,
ich steh eben vor einem Rätsel.
ich habe eine hover navi gemacht mit 2 ebenen.
bei IE7 kpappt die navi immer wieder zu wenn ich mit der maus ind ie 2. ebende fahre.
im ie 6 und 8 klappt das ganze.. nur der ie macht machen..
dann habe ich noch ein Prob unter dem Punnkt kontakt, dass das erste feld größer ist als der rest. da weiß ich auch nicht warum..
hier der code:
Link zur webseite: Tischlerei ANGER - www.Holz-Treppen.de

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tischlerei ANGER - www.Holz-Treppen.de</title>

<link href="inc/style.css" rel="stylesheet" type="text/css">
<link href="inc/navi.css" rel="stylesheet" type="text/css">
<!--[if IE]>
  <style type="text/css">
  @import url(inc/iefix.css);
   body {behavior: url(inc/csshover.htc);} </style> 
<![endif]-->
<!--[if IE 7]>
<style type="text/css">@import url(inc/ie7fix.css); 
</style>
<![endif]-->
<!--[if IE 8]>
<style type="text/css">@import url(inc/ie8fix.css);</style> 
<![endif]-->
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}

function hoverbild(img){
document.hoverpic.src='img/thumb_'+img;
MM_effectAppearFade('bild', 500, 0, 100, false);
}
//-->
</script>
</head>
<body>

<div class="image" id="bild"><img name="hoverpic" src="" border="0"></div>
<div id="links"><div id="logo"><img src="img/logo.gif" alt="Logo" width="156" height="156" border="0"></div>


  
</div><div id="navigation"><div class="nav">
<ul>
<li class="button">
  <div class="parent one"><a href="index2.php">Home</a></div>
</li>

<li class="button"><div class="parent two"><span>Referenzen</span><div class="dropdown"><ul>
 <li style="z-index: 9;"><a href="index2.php?refcat=16" onmouseover="hoverbild('34_Priess1_Kopie.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Decken</a></li>
 <li style="z-index: 8;"> <a href="#" style="cursor:text;" onmouseover="hoverbild('18_Schreibtisch1.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Möbel</a><div class="mini-zone"></div><div><ul>
<li><a href="/index2.php?refcat=12" onmouseover="hoverbild('20_Schulze_S_002.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Einbaumöbel</a></li>
<li><a href="/index2.php?refcat=8" onmouseover="hoverbild('23_Thieme1_Kopie.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Schränke</a></li>
<li><a href="/index2.php?refcat=13" onmouseover="hoverbild('24_ct2.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Tische</a></li>
</ul></div>
</li>
 <li style="z-index: 7;"> <a href="#" style="cursor:text;" onmouseover="hoverbild('8_Gaus2.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Treppen</a><div class="mini-zone"></div><div><ul>
<li><a href="/index2.php?refcat=19" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Geländer</a></li>
<li><a href="/index2.php?refcat=20" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">gerade Treppen</a></li>
<li><a href="/index2.php?refcat=9" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">halb gewendelt</a></li>
<li><a href="/index2.php?refcat=14" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Raumspartreppen</a></li>
<li><a href="/index2.php?refcat=11" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Spindeltreppen</a></li>
<li><a href="/index2.php?refcat=17" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Treppenrenovierung</a></li>
<li><a href="/index2.php?refcat=10" onmouseover="hoverbild('')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">viertel gewendelt</a></li>
</ul></div>
</li>
 <li style="z-index: 6;"> <a href="#" style="cursor:text;" onmouseover="hoverbild('30_Rudolph_H_001.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Türen</a><div class="mini-zone"></div><div><ul>
<li><a href="/index2.php?refcat=15" onmouseover="hoverbild('30_Rudolph_H_001.jpg')" onmouseout="MM_effectAppearFade('bild', 100, 100, 0, false)">Haustüren</a></li>
</ul></div>
</li>
</ul></div>

</div></li>

<!-- neuer punkt -->
<li class="button"><div class="parent three"><span>Kontakt</span>
<div class="dropdown">

    <ul>
        <li style="z-index: 11;"><a href="#" style="cursor:text;">Wir &uuml;ber uns</a>
          <div><ul>
          <li><a href="/index2.php?profil">Firmenprofil</a></li>
          <li><a href="/index2.php?history">Historie</a></li>
          <li><a href="/index2.php?philosophie">Philosophie</a></li>
          </ul></div>
        </li>
        <li style="z-index: 10;"><a href="/index2.php?kontakt">Kontakt</a></li>
        <!--<li style="z-index: 9;"><a href="/index2.php?bestellung">Bestellung</a></li> -->
        <li style="z-index: 8;"><a href="/index2.php?links">Links</a></li>
        <li style="z-index: 7;"><a href="/index2.php?anfahrt">Anfahrt</a></li>
        <li style="z-index: 6;"><a href="/index2.php?impressum">Impressum</a></li>
    </ul>
    </div></div>    
</li>
</ul>
<br class="brclear" />

</div> <!--// close nav --></div>
CSS:
-Navi.css:
Code:
@charset "utf-8";
/* CSS Document */

/*XXXXXXXXXX Generic page styling rules XXXXXXXXXX*/

.nav ul, .nav li { list-style: none;}


/*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/

.nav {
    position: relative;
    padding:1px 20px 0;
    width: 90%;
    z-index:4;
    height:35px;
top:-10px;
    }

.button {
    width: 120px;
    float: left;
    margin-right: 20px;
    top:-10px;
    }

.parent {position: relative;}


.floatfix {margin-right: -3px;}
/* this fixes the IE 3px bug that is common in this type of float arrangement */

/*XXXXXXXXXXXX Primary dropdown/flyout rules XXXXXXXXXXX*/

.dropdown { /* rules for dropdown div */
    width: 141px;
    position: absolute;
    left:-3000px;
    top: auto; /* puts dropdowns directly under top nav */
    text-align: left; /* needed because IE misapplies text centering to boxes */
    z-index:10;
    }

.dropdown div {
    width: 145px;
    position: absolute;
    left: -3000px;
    top: 0;
    text-align: left; /* needed because IE misapplies text centering to boxes */
    }

/* The margins on the UL's replace the div paddings to create "sticky hovering"
zones,  and the margins should "fill" the divs, making the IE BG fix unnecessary.
Unfortunately the BG fix is still needed, altho this method does eliminate
possible box model problems */

.dropdown ul {
  width: 155px; /* tweaked so that dropdowns appear to "line up" with top links */
  margin: 0px 0px 0px 0px; /* creates "sticky hovering" zones for dropdowns */
  border: 0px;
  text-align:left;
  left:-34px;
  
  } /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */

.dropdown div ul {margin: 0 0px 0px 0;} /* creates "sticky hovering" zones for flyouts */

.nav li {text-align: center;
background: #f2b948;
}
.nav li:hover {
background:#F17607;}

.nav a, .nav span {
  display: block;
  color: #800;
    font-weight: bold;
    font-size: .9em;
    text-decoration: none;
    padding: 6px 0 5px;
    border: 1px solid #888;  /* makes the dividers between the top nav links */
    }

.nav ul ul a {
  color: #800;
  border-right: 0; /* negates right border for dropdowns and flyouts */
  border-bottom: 1px solid #888;  /* borders the bottoms of the dropdown and flyout links */
  }

.dropdown li {
  position: relative;
  vertical-align: bottom; /* IE5/win bugfix */
  }



.parent:hover div.dropdown {left: -20px;} /* hover rule for dropdowns */
/* extra pixel makes dropdowns "line up" with top links */

.dropdown li:hover div { /* hover rule for flyouts */
    left: 99px; /* this value controls the amount of flyout "overlap" */
    
    top: 0px; /* this value controls the amount of flyout vertical offset */
    }

.nav div.mini-zone { /* special hover zone that covers the "danger corner" */
  padding: 0;
  width: 15px;
    height: 15px;
    font-size: 1px;
    left: -3000px;
    bottom: -15px;
    top: auto;
    }

.nav .dropdown li:hover div.mini-zone { /* hover rule for mini-zones */
    left: auto;
    right: 8px;
    top: auto;
    }

/*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/

.one {z-index: 10;}
.two {z-index: 20;}
.three {z-index: 30;}
/* this last is a special trick that reverses the stacking order of the rightmost
top link when it or its children are hovered. This, and the previous rules work
together so that when a user is on the top link of any flyout, they can move
vertically to the top link directly above and not have the sticky hoivering zone
on the flyout get in the way of hovering that top link. */


/*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/

/* This is to hide the following from IE/Mac. \*/
* html .button .dropdown li {
height: 1%;
margin-left: -16px;
mar\gin-left: 0;
}
/* */

* html .nav a
 {height: 1%;}

/* The first 2 rules above fix "bullet region" problems in IE5.x/win,
and the 2nd is to make all links fully clickable. */

.brclear { /* Use a break with this class to clear float containers */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

/*\*/ /*/
.nav .dropdown, .nav .dropdown div {width: 189px;}
.nav .button .dropdown ul {margin: 0px;}
.nav .dropdown, .nav .dropdown div {position: static;}
.nav .dropdown ul {border: 0;}
.mini-zone {display: none;}
/* this rule block "dumbs down" the nav for IEmac */

.image {
background-color:#FFFFFF;
left:5px;
    margin: 2px;
    height: 160px;
    width: 160px;
    visibility: hidden;
    position:absolute;
    z-index:10000;
}
-IE7Fix:
Code:
/* CSS Document */

.nav {
top:6px;
height:30px;

}
li:hover .dropdown {
margin-left:20px;

display:block;
position:relative;

}
.dropdown li {
position:relative;
}
.dropdown li:hover div {
left:135px;
clear:left;
float:left;
}
hat keiner eine Idee die zur lösung führen könnte?
 
Zuletzt bearbeitet von einem Moderator:

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben