[Erledigt] CSS Sub-Menü funktioniert in FF & Chrome, nicht aber in IE.

M3doXX · 12.04.2011, 18:15

Hallo,

ich plage mich jetzt geschlagene 2 Wochen mit dem besch**** Internet Explorer rum. Ich möchte ein Menü mit Submenüpunkten mit CSS erstellen, aber der Internet Explorer tanzt immer aus der Reihe. Ich habe jetzt ein ganz einfaches Menü im Netz gefunden, und in meine Homepage eingebunden.
Vorlage ist dieses Menü:

http://css.maxdesign.com.au/listamatic2/vertical11.htm

Ich habe den Code so angepasst:

CSS:

Code:

#navlist
		{
			list-style-type: none;
			color: darkgray;
		
			margin-left: 5px;
		}
		
		#active:hover li { display: block; }
		#active li { display: none; }
		
	
		#links a
		{
			color: black;
			
			width: 120px;
			display: block;
		}
		
		#links a:visited
		{
			color: black;
			
		}
		
		#links a:active
		{
			color: white;
			background-color: gray;
		}
		
		#links a:hover
		{
			color: white;
			background-color: blue;
		}

HTML/PHP:

PHP-Code:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HueCMS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="template.css" />  
</head>

<body>

<div id="kopf">
  <p><strong>HueCMS</strong></p>
</div>

<div id="mitte">

    <div id="inhalt">
    <pre>
    LOREM IPSUM
    asdasd
    asdadsasd
    asdasdasd
    asd
    asd
    ad
    d
    d
    d
    d
    d
    d
    d
    d
    d
    d
    d
    d
    d
    d

    </pre>
    </div>

    <div id="links">
        
        <ul id="navlist">
        <li id="active"><a href="#" id="current">Item one</a>
        <ul id="subnavlist">
            <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>

            <li><a href="#">Subitem two</a></li>
            <li><a href="#">Subitem three</a></li>
            <li><a href="#">Subitem four</a></li>
        </ul></li>
        <li><a href="#">Item two</a></li>
        <li><a href="#">Item three</a></li>

        <li><a href="#">Item four</a></li>
    </ul>

        

    </div>

    <div id="rechts"><p><strong>Rechte Spalte</strong></p>
    </div>



</div>

<div id="fuss">
  <p><strong>Fußleiste</strong></p>

</div>

</body>
</html>

Im Internet Explorer öffnet sich das Submenü einfach nicht...
Was mache ich falsch?
Grüße

M3doXX

mermshaus · 12.04.2011, 21:19

Der DOCTYPE scheint als Quirks-Mode-DOCTYPE interpretiert zu werden. Vielleicht, weil dort „HTML 4.0“ und nicht „HTML 4.01“ steht. *schulterzuck*

nikosch · 12.04.2011, 21:35

Wie Dir der verlinkte Browserchart zu Pop open list verrät, unterstützt der IE das Menü auch gar nicht. IMHO gibt es für den IE (mindestens) 6 überhaupt keine CSS-only Klappmenüs. Du wirst hier immer auf eine Javascript-Erweiterung ausweichen müssen.
Ich würde Suckerfisch empfehlen.

Zitat:

der Internet Explorer
Im Internet Explorer

Also ich kenne x Versionen. Du solltest schon klar benennen, wofür Du entwickelst, wenn Du hier Hilfe erwartest.

M3doXX · 12.04.2011, 21:47

OK, danke.
Werde dann wohl auf eine Javascript-Lösung umsteigen.

nikosch · 12.04.2011, 22:42

Meistens reicht es aus, per JS (bspw. jQuery) die :active oder :focus Verhalten per Klasse nachzubilden und zusätzlich im CSS anzulegen; also bspw.

Code:

li:hover {
  ...
}

zu

Code:

li.hover ,
li:hover {
  ...
}

und

in jQuery:

PHP-Code:

  $('#navi li').each (function () {
  var that = this;
  $(this)
    .mouseover (function () { that.addClass ('hover'); })
    .mouseout  (function () { that.removeClass ('hover'); });
});

o.ä.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Menü - Ideensammlung	richardf	HTML, Usability und Barrierefreiheit	9	14.09.2010 15:21
Drop Down Menü aus text-Datenbank - andere Möglichkeit für erste Zeile?	UdoDirk	PHP Tipps 2010	7	21.07.2010 22:25
Menü mit Untermenü	phpstarterin	Scriptbörse	13	10.12.2009 15:04
[Erledigt] Umlaute ersetzen funktioniert nicht richtig	BlackSpirit	PHP Tipps 2009	19	20.04.2009 12:04
Aufklappbares Menü mit Obektverschieben beim Öffnen funktioniert nicht richtig	K3HLIM	JavaScript, Ajax und mehr	4	14.01.2009 20:03
menu in einer xhtml seite	stripes	PHP Tipps 2009	31	04.01.2009 14:26
[Erledigt] Menü mit CSS und JavaScript	vollkommenegal	HTML, Usability und Barrierefreiheit	18	12.11.2008 13:50
On Mouse Over Menu für PHP gesucht!	litterauspirna	PHP Tipps 2008	9	23.05.2008 22:02
Session funktioniert nicht bei session.use_cookies = Off	Quagga	PHP Tipps 2007	13	13.01.2007 18:27
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
PHP Menü onMouseOver !!!		PHP Tipps 2005-2	6	23.08.2005 00:56
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24

12.04.2011, 18:15
M3doXX Neuer Benutzer Registriert seit: 05.02.2011 Beiträge: 23 PHP-Kenntnisse: Anfänger	[Erledigt] CSS Sub-Menü funktioniert in FF & Chrome, nicht aber in IE. Hallo, ich plage mich jetzt geschlagene 2 Wochen mit dem besch**** Internet Explorer rum. Ich möchte ein Menü mit Submenüpunkten mit CSS erstellen, aber der Internet Explorer tanzt immer aus der Reihe. Ich habe jetzt ein ganz einfaches Menü im Netz gefunden, und in meine Homepage eingebunden. Vorlage ist dieses Menü: http://css.maxdesign.com.au/listamatic2/vertical11.htm Ich habe den Code so angepasst: CSS: Code: #navlist { list-style-type: none; color: darkgray; margin-left: 5px; } #active:hover li { display: block; } #active li { display: none; } #links a { color: black; width: 120px; display: block; } #links a:visited { color: black; } #links a:active { color: white; background-color: gray; } #links a:hover { color: white; background-color: blue; } HTML/PHP: PHP-Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>HueCMS</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="template.css" /> </head> <body> <div id="kopf"> <p><strong>HueCMS</strong></p> </div> <div id="mitte"> <div id="inhalt"> <pre> LOREM IPSUM asdasd asdadsasd asdasdasd asd asd ad d d d d d d d d d d d d d d </pre> </div> <div id="links"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a> <ul id="subnavlist"> <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li> <li><a href="#">Subitem two</a></li> <li><a href="#">Subitem three</a></li> <li><a href="#">Subitem four</a></li> </ul></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> </ul> </div> <div id="rechts"><p><strong>Rechte Spalte</strong></p> </div> </div> <div id="fuss"> <p><strong>Fußleiste</strong></p> </div> </body> </html> Im Internet Explorer öffnet sich das Submenü einfach nicht... Was mache ich falsch? Grüße M3doXX Geändert von M3doXX (12.04.2011 um 19:41 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

12.04.2011, 21:19
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Der DOCTYPE scheint als Quirks-Mode-DOCTYPE interpretiert zu werden. Vielleicht, weil dort „HTML 4.0“ und nicht „HTML 4.01“ steht. schulterzuck __________________ Blog \| Buch \| Kaloa

12.04.2011, 21:47
M3doXX Neuer Benutzer Registriert seit: 05.02.2011 Beiträge: 23 PHP-Kenntnisse: Anfänger	OK, danke. Werde dann wohl auf eine Javascript-Lösung umsteigen.

12.04.2011, 22:42
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Meistens reicht es aus, per JS (bspw. jQuery) die :active oder :focus Verhalten per Klasse nachzubilden und zusätzlich im CSS anzulegen; also bspw. Code: li:hover { ... } zu Code: li.hover , li:hover { ... } und in jQuery: PHP-Code: `$('#navi li').each (function () { var that = this; $(this) .mouseover (function () { that.addClass ('hover'); }) .mouseout (function () { that.removeClass ('hover'); }); });` o.ä. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --