| Autor |
Nachricht |
deeesi
Threadersteller
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht: 
|
Verfasst Mi 21.03.2007 10:06
Titel [solved]CSS Ausklapp-Menü. Oberer Menüpunkt aktiv |
  |
|
Hallo zusammen!
Ich hab mal wieder ein Problemchen.
Ich habe folgendes Menü (Ausschnitt aus der Seite)
http://www.desi-gn.de/forum/testmenue/test.html
HTML:
| Code: | <div id="mainnavi">
<ul id="vertnav" onmouseover="toggleMenu(1);" onmouseout="toggleMenu(0);">
<li id="sprache" class="nav"><a href="#"><img src="images/sprachicon.gif" id="sprachicon">Deutsch (ändern)</a>
<ul>
<li><a href="#">English</a></li>
<li><a href="#">Español</a></li>
<li><a href="#">Française</a></li>
</ul>
</li>
<li><img src="images/trenner_grau.gif"></li>
<li class="nav"><a href="#">Sitemap</a></li>
<li><img src="images/trenner_grau.gif"></li>
<li class="nav"><a href="#">Impressum</a></li>
</ul>
</div> |
CSS:
| Code: | #sprachicon{
border: 0;
float:left;
margin-right: 10px;
}
#mainnavi {
height: 25px;
width: 800px;
color: #999999;
float: right;
font-size: 80%;
padding: 10px 10px 0 0;
}
#mainnavi ul {
margin: 0;
border: 0;
padding:0;
float: right;
list-style-type: none;
height:25px;
}
/* Listenelemente */
#vertnav li {
float: left;
position:relative;
margin: 0;
z-index: 10;
color: #ffffff;
text-indent:0px;
}
#vertnav li.nav {
height: 25px;
}
#vertnav a {
display: block; /* lässt die Untermenüs in der gleichen Breite erscheinen */
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
color: #999999;
}
#vertnav li.nav a:hover {
color: #000;
}
/* 2. Ebene */
#menu ul li ul {
padding:0;
}
#vertnav li.nav:hover>ul {
display: inline;
margin: 0 auto;
}
#vertnav li.nav ul {
position: absolute;
visibility: hidden;
z-index: 9999;
top:25px;
left: 0;
padding:0;
}
#vertnav li.nav>ul {
visibility: visible;
display: none;
padding:0;
}
#vertnav li.nav ul li a, #vertnav li.nav ul li a:visited {
color: #000;
font-weight:100;
z-index: 9999;
text-align:left;
height: 15px;
}
#vertnav li.nav li a {
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px 9px 7px 15px;
width:140px;
background:url(../images/pfeil_sprachmenue.gif) no-repeat #E9ECF2;
}
html>/**/body #vertnav li.nav li a { /*für FF, nicht für IE7*/
background-color: #E9ECF2;
border-bottom: 1px solid #CCC;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
padding: 7px 9px 7px 15px;
width:140px;
}
#vertnav li.nav ul li a:hover {
text-decoration: none;
color: #000;
background-color: #ffffff;
width:140px;
}
html>/**/body #vertnav li.nav ul li a:hover {
text-decoration: none;
color: #000;
background-color: #ffffff;
width:140px;
}
#vertnav li.nav li.noLink {
text-align: left;
background-color: #CC6633;
border-top: 1px solid #ffffff;
font-weight: 100;
color: #000;
}
#vertnav LI.nav LI.hi {
color: #ffffff;
}
#navMenu LI I {
display: none;
}
#mainnavi li:hover#sprache{
text-decoration:none;
display:block;
height: 25px;
margin:0;
padding:0px 0 0 4px;
float: left;
background:url("../images/sprache_links.gif") no-repeat left top;
}
#mainnavi #sprache a:hover {
height: 25px;
margin: 0;
padding: 0px 0px 0 4px;
display:block;
float: left;
background:url("../images/sprache_rechts.gif") no-repeat right top;
} |
Das Ausklappmenü für die Sprache macht mir Sorgen.
Ich möchte, dass der Karteireiter da oben***, der beim Roll-Over erscheint auch noch da ist, wenn ich nach unten ins Menü gehe mit der Maus.
Im Moment macht er im Untermenü beim Roll-over auch den Karteireiter. Das soll aber so eckig blau bleiben, nur beim Roll-Over dann weißen hintergrund bekommen.
Hat jemand einen Tipp, was ich falsch gemacht habe, bzw. was ich ändern muss?
Danke schon mal 
*** der setzt sich aus "sprache_links.gif" und "sprache_rechts.gif" zusammen, damit er sich je nach länge der Sprache im Menü anpassen kann
Zuletzt bearbeitet von deeesi am Mi 28.03.2007 12:25, insgesamt 2-mal bearbeitet
|
|
| |
   |
 |
l3mon
Dabei seit: 26.07.2005
Ort: -5m
Alter: 58
Geschlecht: 
|
Verfasst Mi 21.03.2007 10:32
Titel
|
|
|
du bringst das hintergrundbild ja nur beim hovern rein - definier das mal im active bzw current auch
(sorry bin nur drübergeflogen)
|
|
| |
|
|
|
Anzeige
|
|
|
deeesi
Threadersteller
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Mi 21.03.2007 10:41
Titel
|
|
|
hmm, nee, geht net...
soll aber ja auch nur beim hovern. aber überm ganzen menü
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 21.03.2007 11:12
Titel Re: CSS Ausklapp-Menü. Oberer Menüpunkt aktiv |
|
|
| deeesi hat geschrieben: | | Ich möchte, dass der Karteireiter da oben***, der beim Roll-Over erscheint auch noch da ist, wenn ich nach unten ins Menü gehe mit der Maus. |
Dazu mal ein kleines Beispiel:
| 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=iso-8859-1" />
<title>deeesi</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
padding:120px;
}
a:link, a:visited {
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
/* Menü */
ul {
list-style:none;
}
ul li ul {
display:none;
}
ul li:hover ul {
display:block;
}
li:hover li a {
color:#333;
background:#fff;
}
li a:hover,
li:hover a,
li:hover li a:hover {
color:#fff;
background:#333;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Test</a>
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test</a></li>
</ul>
</li>
</ul>
</body>
</html> |
Wichtig ist die Regel:
| Code: | li a:hover,
li:hover a, /* !!! */
li:hover li a:hover {
color:#fff;
background:#333;
} |
|
|
| |
|
|
deeesi
Threadersteller
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Mi 21.03.2007 11:57
Titel
|
|
|
danke...
an sich funktionierts. ich muss nur nochmal rumbasteln, dass ich das mit den 2 hintergrundbildern richtig hinbekomme
eins ist ja auf dem li und eins auf dem a, sonst bekomm ich das ja nicht 2-geteilt hin...schwierig...naja mal gucken
aber ich bin einen schritt weiter
|
|
| |
|
|
deeesi
Threadersteller
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Di 27.03.2007 11:32
Titel
|
|
|
http://www.desi-gn.de/forum/testmenue/hometest.html
Nochmal ein Problem. Und zwar im FF und IE7 macht der oben beim Sprachmenü so eine Art Bogen vor den Menüpunkt, der da bleibt, wenn man runterscrollt. So soll es sein.
Nur der Feine Herr IE6 macht da nicht mit.
Fehlt mirt was im Style Sheet?
relevanter css teil:
| Code: |
#mainnavi li:hover#sprache,
#mainnavi li:hover li#sprache,
#mainnavi a:hover #sprache,
#mainnavi li:hover a#sprache
{
text-decoration:none;
display:block;
height: 30px;
margin:0;
padding: 0px 0 0 4px;
float: left;
background:url(../images/sprache_links.gif) no-repeat left top;
} |
Für Tipps wär ich dankbar. Ich werd noch kirre hier
|
|
| |
|
|
LioGetz
Dabei seit: 24.03.2003
Ort: Aachen
Alter: 44
Geschlecht:
|
Verfasst Di 27.03.2007 11:47
Titel
|
|
|
hm, ich kann da nur vermuten, aber da ich gestern auch diverse IE6 Probleme hatte, kenn ich mich aus  ...
Kann es sein das dem lieben Herr IE das Weltkarten-Gif nicht passt? Das es da zu irgend ner überlappung oder sowas kommt? Hast du es mal ohne das Weltkarten-Ding probiert? 
Grüße von der Pont 
CU
Lio
|
|
| |
|
|
deeesi
Threadersteller
Dabei seit: 01.09.2004
Ort: Leverkusen
Alter: 42
Geschlecht:
|
Verfasst Di 27.03.2007 11:55
Titel
|
|
|
soeben getestet, geht nich 
aber gar nicht mal so übel, der gedanke
hmpf
Olé olé Pont
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[solved] aktiv-Status im Flyout-Menü
Impressum u. Datenschutz als Menüpunkt - Menü nur aufklapbar
Dreamweaver, Spry Menü:ausgewählten Menüpunkt hervorheben
Fireworks: Menü mit Aktiv-Button
Menü Dropdown soll nicht direkt unter dem Menüpunkt beginnen
PS CS4: Bildrand unter oberer Werkzeugleiste - wie anfassen?
|
|
Willkommen auf dem Portal für Mediengestalter
