Danke an Euch.
Ich werde es jetzt noch mal probieren...
Gruß
Anna
Beiträge von 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ß
AnnaHier 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>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="naviie6.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
<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>
<body id="home">
<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> -
...jetzt hat es funktioniert.
Ganz lieben Dank und viele Grüße
Anna -
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?
-
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 uldiv#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>
<div id="menu">
<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>