Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 13.11.2011, 17:03
HTML5junkie HTML5junkie ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.11.2011
Beiträge: 3
HTML5junkie befindet sich auf einem aufstrebenden Ast
Standard Warum geht das nicht?

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>
Mit Zitat antworten
Sponsored Links