Hallo liebe Community, hoffe mir kann jemand weiterhelfen.
Problem:
Ich habe ein schönes Menü, was sich vertikal als sub Menü öffnet. Jetzt möchte ich das die grüne Button-Grafik gehighlitet bleibt, wenn ich im Menü herunterfahre.
Als erste Hilfe habe ich euch eine Grafik erstellt, die euch bildhaft erklären soll, was ich meine.
Anbei nun der Quellcode der Xhtml Datei:
Code:
<ul class="nav">
<li><a href="#" class="home" style=" margin-left:4.5em;"><b></b><span style="margin-left:0.6em;">Home</span></a> <span style="color:#FFFFFF; line-height:2.7em; width:23em;">|</span></li>
<li><a href="#" class="suchmaschinenoptimierung" style="margin-right:10em;"><b></b><span style="margin-left:0.6em;">Suchmaschinenoptimierung
</span>
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div></div>
</a>
<ul>
<li><a href="#12">Übersicht</a></li>
<li><a href="#13">Vorteile</a></li>
<li><a href="#13"> Link Management</a></li>
<li><a href="#15">SEO International
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
</a>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
Jetzt der Quellcode der Css Datei:
Code:
.nav {padding:0 0 0.8em 0; margin:0; list-style:none; height:3em; background:url(../../grafiken/menue/back.png) repeat-x; font-family:verdana, arial, sans-serif; font-size:0.75em; color:#FFFFFF; width:84em;}
.nav li {float:left; height:3em;}
.nav li a {display:block; height:3em; width:7em; margin: 0 0.3em 0 0.3em; float:left; line-height:2.7em; color:#FFF; font-weight:700; text-decoration:none; text-align:center;}
.nav li a:hover {position:relative; visibility:visible; line-height:2.7em; z-index:50; }
.nav li a.suchmaschinenoptimierung:hover {position:relative; visibility:visible; line-height:2.7em; z-index:500; color:#FF0000; height:17em; width:7em; }
.nav li:hover > a.home:hover b {display:block; width:6em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.suchmaschinenoptimierung:hover b {display:block; width:14em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.suchmaschinenmarketing:hover b {display:block; width:14em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.services:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.know-how:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.ueber:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li a.karriere:hover b {display:block; width:7em; height:3em; background:url(../../grafiken/menue/toptab_shadow2.png);}
.nav li a:hover span {display:block; width:6em; height:3em; position:absolute; left:0; top:0; cursor:pointer;}
.nav li ul, .nav li div {position:absolute; left:-9999px;}
.nav li:hover {position:relative;}
.nav li:hover > a {line-height:2.7em; color:#000;}
.nav li:hover > a.home:hover b {display:block; width:6em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.suchmaschinenoptimierung:hover b {display:block; width:16em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.suchmaschinenmarketing:hover b {display:block; width:15em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.services:hover b {display:block; width:5.8em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.know-how:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.ueber:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow.gif);}
.nav li:hover > a.karriere:hover b {display:block; width:7em; height:3.3em; background:url(../../grafiken/menue/toptab_shadow2.png);}
.nav table {border-collapse:collapse; margin:o.07320em;}
.nav :hover div {left:0.3em; top:3.3em; width:16.6em; height:12.2em; padding:0.732em 0; background:url(../../grafiken/menue/sub_back.png); z-index:100;}
.nav :hover ul {padding:0; margin:0; list-style:none; left:0; top:2.7086em; width:14.641em; height:10.541em; padding:0.7320em 0; z-index:120;}
.nav :hover ul li {height:1.9765em;}
.nav :hover ul li a {height:1.9765em; line-height:1.9765em; color:#fff; width:14.3484em; text-align:left; text-indent:20px;}
.nav :hover ul li a:hover {background: url(../../grafiken/menue/subtab_over.png); color:#000;}
.nav :hover ul li:hover > a {background: url(../../grafiken/menue/subtab_over.png); color:#000;}
.nav :hover ul ul, .nav :hover ul div {position:absolute; left:-9999px;}
.nav :hover ul :hover {z-index:200;}
.nav :hover ul :hover div {left:10.9809em; top:o.2928em; width:14.6412em; height:10.5417em; padding:0.7320em 0; background:url(../../grafiken/menue/sub_back.png); z-index:200;}
.nav :hover ul :hover ul {padding:0; margin:0; list-style:none; left:10.9809em; top:0.2928em; width:14.6412em; height:10.5417em; padding:10px 0; z-index:250;}
.nav :hover ul :hover ul li a {background:transparent;}
.nav :hover ul :hover ul li a:hover {background: url(../../grafiken/menue/subtab_over.png); color:#000;}
/* Formatierung Menü Ende */
so hoffe ich hoffe, mir kann jemand weiterhelfen.