Warum geht das nicht?

HTML5junkie · #1 (**permalink**) 13.11.2011, 17:03

Folgendes HTML:

HTML-Code:

<div id="dropdown">
<ul>
    <li><a class="clicked" href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
</ul>
</div>

Folgendes CSS:

Code:

#dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#dropdown ul li {
	position: relative;
	float: left;
}

#dropdown li ul {
	position: absolute;
	top: 100%;
	display: none;
}

/* Styles for Menu Items */
#dropdown ul li a {
    display: block;
    padding: 0.2cm;
    background-color: #000032;
}

#dropdown ul li a:hover {
    background-color: white;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */



a.clicked {
	text-decoration: none;
	color: yellow;
	font-weight: bold;
}

a.clicked:hover {
	text-decoration: none;
	color: #000032;
	background-color: yellow;
	font-weight: bold;
}

Folgendes Ergebnis:

Unbenannt.png

Folgendes Kommentar:

SCHEISSE! Warum geht der 5te Menüpunkt nicht unter dem ersten (den mit der klasse

Code:

clicked

sondern erst danach weiter?????

DANKE SCHON MAL IM VORAUS!!!

(Hier noch mal das ganze als valide Website, zum ausprobieren

HTML-Code:

<!doctype html>
<html>
    <head>
        <title>Beispiel</title>
        <style>
        #dropdown ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

#dropdown ul li {
	position: relative;
	float: left;
}

#dropdown li ul {
	position: absolute;
	top: 100%;
	display: none;
}

/* Styles for Menu Items */
#dropdown ul li a {
    display: block;
    padding: 0.2cm;
    background-color: #000032;
}

#dropdown ul li a:hover {
    background-color: white;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

#dropdown li:hover ul { display: block; } /*  The magic */



a.clicked {
	text-decoration: none;
	color: yellow;
	font-weight: bold;
}

a.clicked:hover {
	text-decoration: none;
	color: #000032;
	background-color: yellow;
	font-weight: bold;
}
        </style>
    </head>

    <body>
    <div id="dropdown">
<ul>
    <li><a class="clicked" href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
    <li><a href="Beispiel.htm">Beispiel</a>
        <ul>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
            <li><a href="Beispiel">Beispiel</a></li>
        </ul>
    </li>
</ul>
</div>
    </body>
</html>

cebito · #2 (**permalink**) 13.11.2011, 17:11

Mach mal den Browser größer

, oder gib deiner ul 'ne feste Breite statt 100% (die hat sie auch ohne das du es extra schreibst)

fricca · #3 (**permalink**) 13.11.2011, 17:22

Ich kann das Problem in keinem Browser nachvollziehen.

Ich schätze, aus irgendeinem Grund wird der erste, der "aktive" Menüpunkt höher als die anderen und die Floats bleiben daran hängen. Könnte mit der Fettung zusammenhängen. Oder mit Rundungsfehlern wegen der untauglichen Einheit cm fürs Padding.

Bitte, auch wenn dich ein Problem nervt: Bleib bei einer sachlichen Ausdrucksweise. Fäkalsprache will niemand lesen. Massenhafte Verwendung von Satzzeichen und permanente Großschreibung sind nervig, letzteres gilt als Herumschreien.

@cebito: Ich schätze, das Thema des Threads soll nicht sein, wie der Umbruch zu verhindern ist, sondern warum der Umbruch so stattfindet, wie er stattfindet -- wobei ich das Problem wie gesagt nicht nachvollziehen kann.

HTML5junkie · #4 (**permalink**) 14.11.2011, 16:57

Zitat:

Zitat von fricca

Könnte mit der Fettung zusammenhängen.

Ja. Das war richtig. Danke!

Zitat:

Zitat von fricca

Bleib bei einer sachlichen Ausdrucksweise. Fäkalsprache will niemand lesen. Massenhafte Verwendung von Satzzeichen und permanente Großschreibung sind nervig, letzteres gilt als Herumschreien.

Ja. Merke ich mir!

Zitat:

Zitat von fricca

Wobei ich das Problem wie gesagt nicht nachvollziehen kann.

Ich habs jetzt auch in firefox und opera ausprobiert. Bei firefox hats geklappt, bei Opera mal ja mal nein - nur bei Chrome war das Problem immer.

HTML5junkie · #5 (**permalink**) 14.11.2011, 17:07

Habe jetzt die Lösung gefunden den Link fett zu machen, aber so das es trotzdem geht. Einfach bei allen Links

Code:

line-height: 100%

und fertig!

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