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

Drop Down Menü

I

im-takt

Neues Mitglied
hallo ich wollte dieses dropdown Menü auf meiner homepage einbauen aber ich komm da nicht ganz klar mir fehlt da ein Schnipsel am Schluss denke ich.

http://designyourweb.info/so-gehts-ein-schlankes-css3-dropdown-menu-erstellen/346#comment-115

ich bin nur soweit und es klappt nicht vil. könnt ihr mir ja sagen was ich da falsch mache

<link rel="stylesheet" href="style.css">
nav {
width: 960px;
}
nav ul {
padding: 0px;margin: 0px;
}
nav ul:after {
clear: both;content: " ";display: block;font-size: 0;height: 0;visibility: hidden;
}
nav ul,nav ul li{background-color: #FAFAFA;
}
nav ul li {list-style: none;float:left;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a:hover{
color: #333;
}
 
Du hast wohl Probleme mit dem Einbinden des CSS-Teils. Da hast du 2 Möglichkeiten:

1. du fügst den CSS-Code der Seite zwischen
HTML: 
<style type="text/css">
    /* hier kommt der CSS-Code hin */
</style>
ein, oder

2. du speicherst den CSS-Code in eine eigene Datei dateiname.css und bindest diese dann so ein:
HTML: 
<link rel="stylesheet" href="dateiname.css" />
Diese Methode ist zu bevorzugen, speziell wenn du das Menü auf verschiedenen Seiten verwenden willst!

Beides natürlich im <head>-Bereich deines HTML-Dokuments.
 
suppa jetzt funktionierts ein problem hab ich aber noch die Navigation wird untereinander angezeigt anstatt nebeneinander woran kann das liegen :

head Bereich :

<link rel="stylesheet" href="style.css" type="text/css" />

<style type="text/css">
/*<![CDATA[*/

nav {
width: 960px;
}
nav ul {
padding: 0px;
margin: 0px;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul,nav ul li{
background-color: #000000;
}
nav ul li {
list-style: none;
float:left;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
}
nav ul li ul li a:hover{
color: #333;
}

nav ul {
padding: 0px;
margin: 0px;

box-shadow: 2px 2px 2px #dfdfdf;
-moz-box-shadow: 2px 2px 2px #dfdfdf;
-webkit-box-shadow: 2px 2px 2px #dfdfdf;
}
nav ul li {
list-style: none;
float:left;
border-right: 1px solid #dfdfdf;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;

transition: background 0.3s ease-out; /* explorer 10 */
-webkit-transition: background 0.3s ease-out; /* chrome & safari */
-moz-transition: background 0.3 ease-out; /* firefox */
-o-transition: background 0.3 ease-out; /* opera */
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a {
background-color: #E6DD00;
}
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a {
background-color: #8CB302;
}
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a {
background-color: #008C74;
}
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a {
background-color: #004C66;
}
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a {
background-color: #332B40;
}
nav ul li:hover > a {
color: #FAFAFA;
}
nav ul li ul li a {
color: #FAFAFA;
}
nav ul li ul li a:hover{
color: #333;
background-color: #FAFAFA !important;
}
/*]]>*/
</style>


und der html Bereich :

<nav></nav>
<ul>
<li class="cat1">
<nav><a href="#">Home</a></nav>
</li>

<li style="list-style: none">
<nav></nav>
</li>

<li class="cat2">
<nav><a href="#">Über uns</a></nav>
<ul>
<li>
<nav><a href="#">Wer wir sind</a></nav>
</li>

<li>
<nav><a href="#">Was wir machen</a></nav>
</li>

<li>
<nav><a href="#">Unsere Ziele</a></nav>
</li>

<li>
<nav><a href="#">Unser Team</a></nav>
</li>
</ul>
</li>

<li class="cat3">
<nav><a href="#">Leistungen</a></nav>
<ul>
<li>
<nav><a href="#">Webdesign</a></nav>
</li>

<li>
<nav><a href="#">Programmierung</a></nav>
</li>

<li>
<nav><a href="#">Online Marketing</a></nav>
</li>

<li>
<nav><a href="#">Suchmaschinenoptimierung</a></nav>
</li>
</ul>
</li>

<li class="cat4">
<nav><a href="#">Referenzen</a></nav>
<ul>
<li>
<nav><a href="#">Webseiten</a></nav>
</li>

<li>
<nav><a href="#">Themes &amp; Templates</a></nav>
</li>

<li>
<nav><a href="#">Plugins</a></nav>
</li>
</ul>
</li>

<li class="cat5">
<nav><a href="#">Kontakt</a></nav>
<ul>
<li>
<nav><a href="#">Deutschland</a></nav>
</li>

<li>
<nav><a href="#">Amerika</a></nav>
</li>

<li>
<nav><a href="#">Spanien</a></nav>
</li>
</ul>
</li>
</ul>
 
1. verwende bitte Code-Tags wenn du Code postest. Das erleichter das Lesen enorm.
2. Dein HTML-Code hält sich überhaupt nicht an das Beispiel. Im Speziellen die <nav>-Tags innerhalb der <li> und das schließende </nav> vor dem eigentlichen Menü. So ist es eigentlich ein Wunder, wenn es optisch überhaupt dem Beispiel nahe kommt...
 
srii ich bin Anfänger und ich mach meine Seite über jimdo .. und wenn ich den code aus dieser www.designyourweb.info raus kopier und bei meiner Seite dann einfüge .. ändert sich das code in das, wie es da oben beschrieben ist .. vil hast du ja eine bessere lösung das das nicht passiert. wäre supper
vielen dank im voraus ..

das mit dem code mach ich auch in Zukunft so .. hab erst jetzt gesehen wie das geht :)
 
Code: 
<nav></nav>
<ul>
    <li class="cat1">
        <nav><a href="#">Home</a></nav>
    </li>

    <li style="list-style: none">
        <nav></nav>
    </li>

    <li class="cat2">
        <nav><a href="#">Über uns</a></nav>
        <ul>
            <li>
                <nav><a href="#">Wer wir sind</a></nav>
            </li>

            <li>
                <nav><a href="#">Was wir machen</a></nav>
            </li>

            <li>
                <nav><a href="#">Unsere Ziele</a></nav>
            </li>

            <li>
                <nav><a href="#">Unser Team</a></nav>
            </li>
        </ul>
    </li>

    <li class="cat3">
        <nav><a href="#">Leistungen</a></nav>
        <ul>
            <li>
                <nav><a href="#">Webdesign</a></nav>
            </li>

            <li>
                <nav><a href="#">Programmierung</a></nav>
            </li>

            <li>
                <nav><a href="#">Online Marketing</a></nav>
            </li>

            <li>
                <nav><a href="#">Suchmaschinenoptimierung</a></nav>
            </li>
        </ul>
    </li>

    <li class="cat4">
        <nav><a href="#">Referenzen</a></nav>
        <ul>
            <li>
                <nav><a href="#">Webseiten</a></nav>
            </li>

            <li>
                <nav><a href="#">Themes &amp; Templates</a></nav>
            </li>

            <li>
                <nav><a href="#">Plugins</a></nav>
            </li>
        </ul>
    </li>

    <li class="cat5">
        <nav><a href="#">Kontakt</a></nav>
        <ul>
            <li>
                <nav><a href="#">Deutschland</a></nav>
            </li>

            <li>
                <nav><a href="#">Amerika</a></nav>
            </li>

            <li>
                <nav><a href="#">Spanien</a></nav>
            </li>
        </ul>
    </li>
</ul>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben