Dropdownmenue funktioniert nicht

YandelF · #1 (**permalink**) 01.09.2012, 16:36

Folgendes: Mein Dropdownmeue lässt sich zwar herunterfahren, aber ich kann dann nicht auf das neu aufgelistete zugreifen, wahrscheinlich weil da eine kleine Lücke ist. Leider hab ich keine Ahnung wie ich die wegbekomme oder was das Problem sonst sein könnte

Hier der HTML-Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	    <link href="style.css" type="text/css" rel=StyleSheet>
		<title>Grundgerüst</title>
	</head>
	<body>
		<nav>
		      <div id="navigation_main">
		      
                <div id="main">
                
                      <ul id="navi_main">
                      
                           <a href="#"><li class="Home">Home
                           </li></a>
                           <a href="#"><li class="News">News
                                <ul class="dropdown_navi">
                                    <a href="#"><li>Half|Craft</li></a>
                                </ul>
                           </li></a>
                           
                      </ul>
                
                </div>
                
              </div>
		</nav>
	</body>
</html>

Und hier der CSS-Code der Navigation:

Code:

/* css script dropdown_navi */

ul#navi_main {
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    font-size: small;
    color: #000000;
}
ul#navi_main a {
    text-decoration: none;
    color: white;
}
ul#navi_main a:hover {
    text-decoration: none;
    color: #00FF00;
}
ul#navi_main li {
    float: left;
    position: relative;
    list-style-type: none;
}
ul#navi_main li.Home {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;    
}
ul#navi_main li.News {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
}
    ul#navi_main li.Home:hover {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #00FF00;
    background-color: #C1C1C1;
    }
    ul#navi_main li.News:hover {
    width: 125px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #00FF00;
    background-color: #C1C1C1;
    }


ul#navi_main li ul.dropdown_navi {
    background-color: #C1C1C1;
    position: absolute;
    left: 0;
    top: 30px;
    width: 125px;
    padding: 5px;
}
ul#navi_main li ul li {
    float: none;
    text-align: left;
    display: block;
    color: white;
    padding:5px; 
    border-bottom-color: #000000;
    border-bottom: solid;
    border-bottom-width: 1px;
}
ul#navi_main li ul li:hover {
    float: none;
    text-align: left;
    display: block;
    background-color: gray;
    padding: 5px;
    
}
ul#navi_main li>ul {
    display: none;
}
ul#navi_main li:hover>ul {
    display: block;
}

Hier noch die eigentliche CSS-Datei:

Code:

/* css script */

@import url("navi.css");

body {
    background-color: #808080;    
}

ich hoffe ihr könnt mir weiterhelfen

)

Manfred62 · #2 (**permalink**) 01.09.2012, 17:18

1. dein html ist falsch bzw. falsch verschachtelt --> Validator
2. stell das mal online (nach der Korrektur), dann kann man besser helfen

YandelF · #3 (**permalink**) 01.09.2012, 17:51

Zitat:

Zitat von Manfred62

1. dein html ist falsch bzw. falsch verschachtelt --> Validator
2. stell das mal online (nach der Korrektur), dann kann man besser helfen

Hab den Code mal dadurch gejagt ... Keine falsche verschachtelung.

Manfred62 · #4 (**permalink**) 01.09.2012, 17:55

Hmm, weiss nicht, was du da getestet hast..?

Zitat:

Info No Character encoding declared at document level

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

See this tutorial on character encoding for techniques and explanations.

Info Using Direct Input mode: UTF-8 character encoding assumed

Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator's form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.

If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.

↑ Top
Validation Output: 7 Errors

Error Line 8, Column 7: element "NAV" undefined

<nav>

✉

You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:
incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Error Line 15, Column 39: start tag for "LI" omitted, but its declaration does not permit this

<a href="#"><li class="Home">Home

✉
Error Line 15, Column 56: document type does not allow element "LI" here

<a href="#"><li class="Home">Home

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 17, Column 56: document type does not allow element "LI" here

<a href="#"><li class="News">News

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 19, Column 48: document type does not allow element "A" here

<a href="#"><li>Half|Craft</li></a>

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 19, Column 52: document type does not allow element "LI" here

<a href="#"><li>Half|Craft</li></a>

✉

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
Error Line 20, Column 37: end tag for "UL" which is not finished

</ul>

✉

Most likely, you nested tags and closed them in the wrong order. For example ... is not acceptable, as must be closed before . Acceptable nesting is: ...

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

YandelF · #5 (**permalink**) 01.09.2012, 18:03

Hmm ... ok dann hab ich das wohl falsche gemacht ;o

Ich hab mir deine Fehlermeldungen mal angeschaut: Sind das denn relevante Punkte die dort aufgeführt werden? Eigentlich könnte es ja garnicht daran liegen oder?

gato · #6 (**permalink**) 01.09.2012, 18:59

Zitat:

Zitat von YandelF

Ich hab mir deine Fehlermeldungen mal angeschaut: Sind das denn relevante Punkte die dort aufgeführt werden? Eigentlich könnte es ja garnicht daran liegen oder?

Nicht alle Fehler die du erzeugt hast wirken auf dein Problem ein, aber die schiere Anzahl der Fehler macht es schwer, den tatsächlichen Übeltäter zu finden.

Außerdem würde ich dir raten, dein Stylesheet etwas aufzuräumen, d.h. unnötige oder doppelte Angaben entfernen.

Wie dem auch sei, dein Problem besteht ganz einfach darin, dass die Submenüs 30 Pixel unter dem gehoverten Hauptmenüpunkt beginnen. Die Hauptmenüpunkte sind aber keine 30 Pixel hoch, daher hast du keinen Kontakt/Übergang zwischen beiden Elementen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Funktionsaufruf bei onclick-Event funktioniert nicht	Ulixes	Javascript & Ajax	28	18.12.2011 20:59
Link zu externen Schriften funktioniert nicht	css-Anfänger	CSS	6	18.07.2011 19:18
Mouseover funktioniert nicht (externe Methode)	blackhtml	CSS	2	07.04.2009 17:49
dtd und css in php funktioniert im IE nicht!!!	da-lick	CSS	17	09.06.2007 15:44
CSS-Navi funktioniert nicht im IE6?	tscho	CSS	4	10.01.2007 12:51