Problem mit CSS-Menü im Internet Explorer

  • Themenstarter Themenstarter BlackPanter
  • Beginndatum Beginndatum
B

BlackPanter

Guest
Hi,

ich habe folgendes Menü:


Code: 
<div id="menu">
			<ul><li><img src="../img/space.gif" class="space_menu"/></li></ul>
			<ul><li><span class="top_link"><a href="../news/eng_news.html">news</a></span></li></ul>
			<ul><li><img src="../img/space.gif" class="space_menu"/></li></ul>
			<ul>
				<li><span class="top_link">camp</span class="top_link">
					<ul>
						<li><a href="../camp/eng_information.html">information</a></li>
						<li><span class="top_link2">facilities</span>
							<ul>
								<li><a href="../camp/eng_jap-house.html">jap. house</a></li>
								<li><a href="../camp/eng_log-cabins.html">log cabins</a></li>
								<li><a href="../camp/eng_chapel.html">chapel</a></li>
								<li><a href="../camp/eng_main-house.html">main house</a></li>
							</ul>
						</li>
						<li><a href="../camp/eng_price-list.html">price list</a></li>
						<li><a href="../camp/eng_application.html">application</a></li>
						<li><a href="../camp/eng_about-us.html">about us</a></li>
					</ul>
				</li>
			</ul>
			<ul><li><img src="../img/space.gif" class="space_menu"/></li></ul>
			<ul><li><span class="top_link"><a href="../links/eng_links.html">links</a></span class="top_link"></li></ul>
        	<ul><li><img src="../img/space.gif" class="space_menu"/></li></ul>		
			<ul><li><span class="top_link"><a href="../contact/eng_contact.html">contact</a></span class="top_link"></li></ul>
        	<ul><li><img src="../img/space.gif" class="space_menu"/></li></ul>
			<ul><li><span class="top_link"><a href="../karuizawa/eng_karuizawa.html">karuizawa</a></span class="top_link"></li></ul>
        	<ul><li><img src="../img/space.gif" class="space_menu"/><img src="../img/space.gif" class="space_menu2"/></li></ul>
			<ul>
            	<li>
                	<span class="top_link">
                    	<a href="jap_.html"><img src="../img/flag_jap.jpg" width="20" height="12" border="0" /> 日本語</a>
                    </span>
                </li>
            </ul>
		</div>

Der CSS-Code dazu sieht so aus:

Code: 
@charset "utf-8";
/* CSS Document */

/*Menü*/

#menu {
width: 100%;
height: 20px;
background: #D6D6D6;
float: left;
font-family: "Arial", "Helvetica";
font-size: 12px;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
float: left;
}

#menu a {

display: block;
/*font: normal 11px/16px arial, helvetica, sans-serif;
border-width: thin;
border-style: solid;
border-color: #ccc #888 #555 #bbb;*/
margin: 0;
padding: 2px 3px;
}

#menu a {
color: #000;
/*background: #efefef;*/
text-decoration: none;
position: relative;
top: -2px;
}

#menu a:hover {
color: #40A348;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
background-color: #D6D6D6;
border-style: solid;
border-width: thin;
border-color: #000;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 75px;
}

.top_link, .top_link2 {
display: block;
/*font: normal 11px/16px arial, helvetica, sans-serif;
border-width: thin;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
background: #efefef;*/
margin: 0;
padding: 2px 3px;
color: #000;
}

.top_link2 {position:relative;top:-1px;left:1px;}
.top_link:hover, .top_link2:hover {color: #40A348;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

Das Menü ist horizontal angeordnet.
Wenn ich auf den Menüpunkt "camp" gehe, klappt mir ein Menü vertikall aus. Geh ich jetzt auf den Punkt "facilities" klappt mir ein weiteres Menü horizontal links davon aus.
Will ich jedoch auf einen Link in diesem Menü klicken, verschiwindet das Menü, sobald ich mit dem Mauszeiger in die näche des Menüs komme.

Dieses Problem habe ich nur im Internet Explorer. Im Firefox, Opera und Safari funktioniert alles einwandfrei.

Internet Explorer benutze ich in der Version 7. Alle anderen Browser sind auf dem aktuellen Stand.
 
Punkt 1: der IE bis einschließlich Version 7 unterstützt die Pseudoklasse hover einzig bei Links. Du wendest sie aber auf span-Tags an - somit geht das im IE7 nicht. Alternative: nutze JavaScript für die aufklappenden Menüs.

Punkt 2: Dein Menü ist kein richtiges. Du müsstest auch die obersten Menüpunkte einzig als li's definieren. Nicht für jedes ein ul verwenden. Dann wäre es semantisch korrekter.
 
@Zwirni: Ich hab das Menü aus dem inet übernommen. Und solange es das tut was es soll, werd ichs wohl auch nicht ändern.

@LX: Vielen vielen Dank! Jetzt läuft alles richtig =) Seit echt klasse. =)
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben