Beiträge von Anna_12

Anna_12

Danke an Euch.

Ich werde es jetzt noch mal probieren...

Gruß
Anna

Anna_12

Guten Abend,

ich versuche seit Stunden folgendes Problem zu lösen, komme aber damit irgendwie nicht klar und würde mich deshalb über Hilfe freuen.

Ich habe ein vertikales Menu mit einem Untermenu erstellt. Das hat alles prima geklappt.

Problem ist jetzt nur, auf der Seite die gerade besucht wird soll der Link/Button optisch hervorgehoben werden (Schrift bzw. Buttonfarbe z. B. rot) und nicht beim wegnehmen der Maus wieder in die Ursprungsfarbe (weiß) wechseln.

Das Gleiche soll auch bei dem Submenu so funktionieren. Außerdem soll es nach dem "aufblättern" "stehen bleiben" und nicht wieder zugehen. Zugehen soll es erst, wenn ein neuer Button außerhalb des Submenu angeklickt wird.

Was kann ich tun?

Gruß
Anna

Hier der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vertikale Navi mit Submenu</title>



<style>
* {
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}

ul#navi , ul#navi ul {
width:125px;
float:left;
background:#5b544a;
}

ul#navi a {
display:block;
padding:5px;
color:#fff;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}

ul#navi li {
position:relative;
}

/* Alle Ebenen ausblenden */

ul#navi ul ,
ul#navi li:hover ul ul ,
ul#navi li:hover ul ul ul {
position:absolute;
left:-9999px;
top:0;
background:#5b544a;
}

/* Einzelne Ebenen einblenden */
ul#navi li:hover ul ,
ul#navi ul li:hover ul ,
ul#navi ul ul li:hover ul
{
left:125px;
}

/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */
ul#navi li:hover > a ,
ul#navi ul li:hover > a,
ul#navi ul ul li:hover > a,
ul#navi ul ul ul li:hover > a
{
background:#7a7063;
color:#990000;
}

ul#navi a span {
float:left;
font-weight:normal;
}

</style>

</head>

<ul id="navi">
<li><a href="#">Button 1</a> </li>
<li><a href="#">Button 2</a>
<ul>
<li><a href="#">Button 2a</a></li>
<li><a href="#">Button 2b</a></li>
<li><a href="#">Button 2c</a></li>
</ul>
</li>
<li><a href="#">Button 3</a>
<ul>
<li><a href="#">Button 3a</a> </li>
<li><a href="#">Button 3b</a></li>
</ul>
</li>

<ul style="clear:both;">
</ul>

</body>

</html>
</html>

Anna_12

...jetzt hat es funktioniert.

Ganz lieben Dank und viele Grüße
Anna

Anna_12

Danke für die Rückmeldung.

Wie vorgeschlagen, habe ich allen Links border:"none" verpasst.

Aber es ist im IE immer noch keine Änderung erkennbar, sprich der blaue Rahmen ist noch da.

Woran könnte es noch liegen?

Anna_12

Guten Tag,

ich habe ein vertikales Navigationsmenü mit aufklappbaren Untermenüs erstellt. Jetzt habe ich dieses per Browservorschau im IE 8 getestet und festgestellt, jeder einzelne Button wird mit einem blauen Rahmen dargestellt. So soll das aber nicht aussehen. In den Browsern Opera, Firefox und Crome erfolgt die Darstellung korrekt ohne Rahmen.

Ich kann mir nicht erklären, woran es liegt. Ist hier eine "Umgehungslösung" speziell für den IE erforderlich oder habe ich etwas falsch gemacht.

Den Code habe ich hier beigefügt.

Ich würde mich freuen, wenn mir jemand bei der Lösung meines Problems helfen könnte.

Danke schon mal und viele Grüße
Anna.

PS. Ich arbeite mit DW CS4.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#navigation ul li, #navigation ul li a {
display: inline-block; /* haslayout Schalter fuer IE6/7 */
}

#navigation ul li, #navigation ul li a {
display: block; /* haslayout reset */
}

#menu ul
#menu h2
#menu a
#menu a:hover
#menu li
#menu ul ul ul

div#menu ul ul ul
div#menu ul ul li:hover ul
div#menu ul ul li.hover ul ul
div#menu ul ul ul li:hover ul

#menu { width: 80px;}
#menu ul {list-style: none;}
#menu h2 { display: block; }
#menu a { text-decoration: none; display: block; }

#menu li { position: relative; }
#menu ul ul ul {position: relative;}
div#menu ul ul ul {display: none; }

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

</style>

</head>

<body>

<li>
<h2> Inhalt </h2>
<ul>
<li>
<ul>
<li> <a href="#"><img src="bilder/button1.jpg" width="125" height="25" /></a> </li>
<li><a href="#nogo"><img src="bilder/button2.jpg" width="125" height="25" /></a>
<ul>
<li><a href="#nogo"><img src="bilder/button21.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button22.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button23.jpg" width="125" height="25" /></a></li>
</ul>
</li>
<li><a href="#nogo"><img src="bilder/button3.jpg" width="125" height="25" /></a>
<ul>
<li><a href="#nogo"><img src="bilder/button31.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"><img src="bilder/button32.jpg" width="125" height="25" /></a></li>
<li><a href="#nogo"></a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 3</a>
<ul>
<li><a href="#nogo">Lektion 3.1</a></li>
<li><a href="#nogo">Lektion 3.2</a></li>
<li><a href="#nogo">Lektion 3.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 4</a>
<ul>
<li><a href="#nogo">Lektion 4.1</a></li>
<li><a href="#nogo">Lektion 4.2</a></li>
<li><a href="#nogo">Lektion 4.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 5</a>
<ul>
<li><a href="#nogo">Lektion 5.1</a></li>
<li><a href="#nogo">Lektion 5.2</a></li>
<li><a href="#nogo">Lektion 5.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

</body>

</html>

Beiträge von Anna_12

vertikale Navi mit Submenu - wie aktive Links hervorheben

vertikale Navi mit Submenu - wie aktive Links hervorheben

Navigationsmenü wird im IE falsch dargestellt

Navigationsmenü wird im IE falsch dargestellt

Navigationsmenü wird im IE falsch dargestellt