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

Dropdown Menü per CSS gestalten

Hsmblada

Neues Mitglied
Hallo alle zusammen,

ich arbeite gerade an einer Website und möchte ein Dropdown-Menü per HTML und CSS erstellen. Gedacht ist eine horizontale Navigationsleiste am oberen Ende der Seite und wenn man über einen Menüpunkt hovert, sollte ein Untermenü vertikal darunter aufklappen. Mein Problem ist aber, dass ich es nicht hinbekomme, die Submenüs richtig unter ihren jeweiligen Menüpunkten anzuordnen, ich habe mal einen Screenshot angehängt, der zeigt, wie es zur Zeit aussieht, aber nicht sein soll. Hier der HTML Ausschnitt:

Code:
<nav>                    
                <ul id="navbar">
                
                    <li id="first_link"><a href="link1.html">News</a></li>
                    
                    <li class="navitem" id="second link"><a href="link1.html">Live</a></li>
                    
                    <li class="navitem" id="third link"><a href="link1.html">Band</a>
                    
                        <ul class="submenu">
                        
                            <li class="submenu_item"><a href="#">Who</a></li>
                            <li class="submenu_item"><a href="#">What</a></li>
                            <li class="submenu_item"><a href="#">Bio</a></li>
                            
                        </ul>
                        
                    </li>
                    
                    <li class="navitem" id="fourth link">
                        <a href="link1.html">Media</a>
                    </li>
                    
                    <li class="navitem" "fifth link">
                        <a href="link1.html">Links</a>
                    </li>
                    
                    <li id="navlogo">
                        <a href="link1.html"><img src="http://www.html.de/images/small_X.png"></a>
                    </li>
    
                </ul>
                
            </nav>

Und hier der CSS Ausschnitt:

Code:
    nav {        width: 1000px;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-image: url(../images/checkerpattern.png);
        background-repeat: repeat-x;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }


    #navbar {
        list-style-type: none;
        width: 1000px;
    }    
    
    .navitem a {
        position: relative;
        width: 166px;
        height: 50px;
        color: #ffffff;
        display: block;
        text-decoration: none;
        text-align: center;
        font-size: 13pt;
        font-weight: 400;
        text-shadow: 0px 1px 1px #000;
        font-family: 'Exo', Arial, sans-serif;
        line-height: 50px;
        float: left;
        
        -webkit-transition: all 100ms ease-in;
        -moz-transition: all 100ms ease-in;
        -o-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
    }
    
    .navitem a:hover {
        background: rgba(0,0,0,0.3);
        box-shadow: 0 -5px 3px -3px #ff0000;
        
        -webkit-transition: all 100ms ease-in;
        -moz-transition: all 100ms ease-in;
        -o-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
    }
    
    .submenu {
        position: absolute;
        list-style-type: none;
        width: 166px;
    }
        
    .submenu_item a {
        height: 49px;
        background: #000000;
        border-bottom: 1px solid #ffffff;
        display: block;
        float: left;
    }

Bin noch Anfänger, also bitte nicht schimpfen, wenn ich was dummes gemacht habe. :grin:

Liebe Grüße,
Hsmblada

Edit: Hoppla, hab den Screenshot vergessen anzuhängen.

screenshot.jpg
 
Zuletzt bearbeitet:
Hi Hsmblada!

Du hast nicht zufällig einen Link zur Seite? Sonst müsste ich mir ja aus all dem, was du gepostet hast, selber ne Seite bauen und dann schauen, ob ich eine Lösung finde ... denn rein durch lesen ist das nicht zu erfassen. Und was sonst noch in HTML- oder CSS-Code stören könnte ich auch nicht zu sehen ...

B.
 
So, hab sie mal auf Dropbox hochgeladen, von dort aus sollte sie soweit funktionieren. Andernfalls sind hier die Links zum Download beider Dateien:

https://dl.dropbox.com/u/5811128/website/index.html
https://dl.dropbox.com/u/5811128/website/css/main-stylesheet.css

Edit:

Okay, ich hab's soweit selbst hinbekommen, hätte aber noch eine Frage: Ab CSS3 ist es doch möglich, Animationen mit "transitionen" zu erstellen. Ich hätte bei den Submenüs gern einen "Rolldown" Effekt, falls ihr versteht, was ich meine. Bis jetzt habe ich mit den Transitions aber nur einen simplen Fade-In-Effekt hinbekommen. Irgendwelche Ideen? Die Links oben habe ich angepasst an die neuen Dateien.
 
Zuletzt bearbeitet:
Zurück
Oben