• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit Drop Down Menü

Y

yamahaboy_46

Neues Mitglied
permalink

Hallo

Ich habe ein massives Problem mit meinem Drop Down Menü in Typo3. Ich verwende Typo 4.5.3. Habe meine Navigation wie folgt aufgebaut: Ich weiß dass dies hier kein Typo3 Forum ist. Doch ich bin mir fast sicher dass mein Fehler im CSS oder HTML liegt.


HTML:

<div id="navigation">

<ul>

<li><a href="#" onfocus="blurLink(this);" >MENÜ 1</a>

<ul>

<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ</a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>
<li><a href="#" onfocus="blurLink(this);" >MENÜ </a></li>

</ul>

</li>

</ul>

</div>


CSS:
#navigation {
width:935px;
height:23px;
margin:0 auto;
position:relative;
border-style:solid;
border-color:#084792;
margin-top:120px;
}

#navigation ul {
margin: 0 auto;
padding: 0; width: auto;
float: left;
list-style-type:none;
}

#navigation ul li{
margin: 0;
padding: 0;
height: 35px;
float: left;
position: relative;
}

#navigation ul li a{
color: #084792;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
text-decoration: none;
padding-left:5px;
width:182px;
height:23px;
display: block;
float: left;
text-align:center;
font-weight:400;

}

#navigation ul li a:hover{
background:#dbdbdb;
}

#navigation ul li ul ul {
margin: 110px 0 0 65px;


}

#navigation ul li li {
width:auto;
height: 50px;
margin-top:-10px;

}

#navigation ul li li a {
text-transform: none;
display:block;
text-align:center;
background: #FFF;
width: 182px;
height:30px;
font-size:12px;
padding-top:10px;


}

#navigation ul li li a:hover{
/*background: none; */
background-color: #dbdbdb;
color:#FFF
left: 0;
width: 182px;
height:30px;
display:block;
}

#navigation ul li ul {
left: -999em;
top: 40px;
left: 0;
display: block;
height: 36px;
width: 85px;
position: absolute;
z-index: 99;
left: -999em;
clear:left;
margin-top: 0px;
margin-left: 0px;
}
#navigation ul li:hover ul ul, #topnav_beispiel ul li:hover ul ul ul { left: -999em; }
#navigation ul li:hover ul, #topnav_beispiel ul li li:hover ul, #topnav_beispiel ul li li li:hover ul { left: auto; }


Typo Script:

lib.navigation = HMENU
lib.navigation {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
NO.wrapItemAndSub = <li>|</li>
}

### Zweite Ebene ###
2 = TMENU
2 {
wrap = <ul>|</ul>
NO.allWrap = <li>|</li>
}
}

Folgendes Problem:

Im Mozilla Firefox funktioniert die Navigation einwandfrei. Ich fahre über das Hauptmenü und das Unternmenü klappt herunter. Es bleibt auch stehen und ich kann die Unterpunkte ganz normal anwählen. Im IE funktioniert dies schon nicht mehr. Sobald ich auf den Hauptnavigationspunkt fahre, klappt zwar die Unternavigation aus, doch sobald ich auf einen Unterpunkt fahren will, klappt die Navigation wieder ein. Das gleiche Problem habe ich mit allen anderen Browsern auch. Einzig im Firefox klappt es einwandfrei.

Was kann da der Fehler sein?

mfg
 
Werbung:
Da kann man wohl nur raten.

Ich vermute, dass sich die zweite ul eventuell zu weit unten befindet, also wenn man mit der Maus den Hauptnavigationspunkt verlässt und sie nach unten bewegt, gibt es eventuell einige Pixel, in denen sich gar nichts befindet und erst darunter beginnt die Subnavi.

Da die Listenpunkte der Hauptnavi eine Höhe von 35px haben und die Subnavi oben einen Abstand von 40px hat (per position:absolute), gibt es scheinbar 5 "leere" Pixel. Gib der Subnavi mal top:35px
 
HTML: 
#navigation ul li li a {

Was soll das sein?
Das geht nicht!

Überprüfe auch dein Doctype, nicht dass der IE im Quirksmodus arbeitet.
 
Werbung:
@dazzle89

Hallo

Das habe ich schon probiert. Ändert aber nichts an meinem Problem. Interessant ist, dass es in sämtlichen Browsern geht. Opera, Google Chrom, Firefox! nur im IE gehts nicht

mfg
 
Hallo

Warum soll das nicht gehen?

Das ist mein Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

mfg
 
Werbung:
yamahaboy_46 schrieb:
Interessant ist, dass es in sämtlichen Browsern geht. Opera, Google Chrom, Firefox! nur im IE gehts nicht
Zum Vergrößern anklicken....

So ist es leider meist. Na ja, früher war es wesentlich schlimmer, die IEs holen auf.

Ob der vorliegende Fall ein IE-Problem ist oder ein Problem mit dem Markup, vermag ich aber nicht zu sagen.

Warum soll das nicht gehen?
Zum Vergrößern anklicken....

Ja, #navigation ul li li a geht schon. a b drückt in CSS ja nicht aus, dass b ein direktes Nachfahrenelement von a sein muss.

Was ist am onfocus unnötig? Hab das aus einer Anleitung heraus.
Zum Vergrößern anklicken....

Das bedeutet ja vermutlich: Sobald der Link den Fokus erhält, soll er den Fokus wieder abgeben. struppi hat es schon gesagt: Der Link ist dann per Tastatur nicht anwählbar, weil er sofort wieder „abgewählt“ wird, sobald er angewählt wird. Die Seite ist so nur per Maus navigierbar. Das ist eine Barriere.

Mit welcher IE-Version tritt das Problem auf? Und kannst du nicht vielleicht eine einfache Testseite erstellen? Ich kann beispielsweise nur raten, was das TypoScript tut oder nicht tut.
 
Hallo

Ja mich geht der IE schon ziemlich an. Nur leider verwenden sehr viele Leute diesen Browser, darum muss ich hier unbedingt Barrierefreiheit schaffen.

Was meinst du mit dem Markup (Sorry bin nicht so ein versierter Webdesigner)

Okay das mit dem blur Link leuchtet mir ein. Aber gibt es eine Möglichkeit das leicht zu ändern. Die Homepage ist sonst eigentlich fertig.

Ich werde mich heute Abend mal hinsetzten und eine kleine Testhomepage online stellen.

mfg
 
Werbung:
Hallo Leute

Anbei eine kurze Testseite mit dem identischen Sourcecode

HOME

Anbei auch noch mein gesamter Typoscript Code:


config {
admPanel = 0
headerComment (
Diese Seite wurde erstellt von:
Test
)
doctype = xhtml_trans
xhtmlDoctype = xhtml_trans
htmlTag_langKey = de_DE
xhtml_cleaning = all
xmlprologue = none
disablePrefixComment = 1
index_enable = 1

baseURL = http://www.paip.at/Testpage/typo3

spamProtectEmailAddresses = ascii
spamProtectEmailAddresses_atSubst = (at)
simulateStaticDocuments = 1
simulateStaticDocuments_noTypeIfNoTitle = 1
removeDefaultJS = external
inlineStyle2TempFile = 1
noScaleUp = 1
meaningfulTempFilePrefix = 50
sys_language_uid = 0
language = de
locale_all = de_DE
}
[browser = msie]
config.doctypeSwitch = 1
[global]


lib.navigation = HMENU
lib.navigation {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul>|</ul>
expAll = 1
noBlur = 1
NO.wrapItemAndSub = <li>|</li>
}
### Zweite Ebene ###
2 = TMENU
2 {
wrap = <ul>|</ul>
NO.allWrap = <li>|</li>
}
}

lib.footernav = HMENU
lib.footernav {
wrap = <ul>|</ul>

special = list
special.value = 51,52,53,54

1 = TMENU

1 {

NO = 1

NO {
allWrap = <li>|</li>
}



}
}
}


//page.shortcutIcon = fileadmin/templates/images/favicon.ico
page.meta {
author = test
robots = index,follow
revisit-after = 30 days
copyright = Heger Edelstahl
MSSmartTagsPreventParsing = true
imagetoolbar = false
//verify-v1 = //Hier der Code für die Google-Webmaster-Tools, falls benötigt//
}

Bitte schaut mal drüber, weil langsam bin ich ziemlich am Verzweifeln.

mfg
 
Werbung:
Die Fehler sieht man wenn man zum Beispiel im Firefox die Fehlerkonsole aufmacht. Da stehen dann die Fehler inklusive der Zeilennummern, in denen sie im Stylesheet vorkommen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben