|
|||
Problem mit Dropdown Menü
Hallo an alle,
ich bin neu hier und auch blutiger Anfänger von Html/CSS Programmierung. Also etwas habe ich mich schon durch Tutorialvideos in die Grundlagen reingefuchst. Ich will eine Homepage von unserer Band erstellen und komme soweit auch klar. Ich wollte für die Navigationsleiste ein Dropdown Menü erstellen (Anleitung hab ich mir bei Youtube rausgesucht) und bin auch etwas voran gekommen. Nun stoße ich auf ein Problem, dass wenn ich mit der Maus drüberfahre, zwar das Menü aufklappt,aber wenn ich dann auf die aufgeklappten Links drüberfahren will,schließt sich das Menü immer. Durch rumprobieren hab ich rausgefunden, dass es an dem unteren div container liegt. Es muss doch eine Möglichkeit geben, dass das aufgeklappte Menü, über den unteren Div Container drüberlappt. Hier erstmal der HtmlCode: Code:
<html> <head> <title>index</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="website"> <div id="head"> <h1>Kopf</h1> </div> <div id="main"> <div id="nav"> <ul id="navi"> <li class="news">News </li> <li class="band">Band <ul> <li><a href="#">Band</a></li> <li><a href="#">Biographie</a></li> <li><a href="#">Discografie</a></li> </ul> </li> <li class="live">Live </li> <li class="media">Media <ul> <li><a href="#">Galerie</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Reviews</a></li> </ul> </li> <li class="contact">Kontakt <ul> <li><a href="#">Gästebuch</a></li> <li><a href="#">Email</a></li> </ul> </li> </ul> </div> <div id="content"> INhalt </div> </div> </body> </html> Code:
@import url(dropdown.css); body { background-color:black; background-image: url("logo.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; text-align:center; color:white; } a { color:fff; } a.hover { } a img { border:0; } #website { width:800px; margin:0 auto; } #coverall{ background-color:black; width:100%; height:100%; } #mitte{ height: 200px; top: 50%; } #head { width:800px; height:200px; background-color:#333333; border-radius:5px; opacity: 0.5; } #nav { text-align:left; background-color:#555555; width:800px; height:50px; margin-top:5px; border-radius:5px; opacity: 0.5; } #content { background-color:#555555; width:800px; height:600px; margin-top:5px; border-radius:5px; opacity: 0.9; } Code:
ul#navi { margin-top:-10px; text-align:center; padding-left:0; } ul#navi li.news { border-top-left-radius:5px; border-bottom-left-radius:5px; } ul#navi li.contact { border-top-right-radius:5px; border-bottom-right-radius:5px; } ul#navi a { background-color:#666666; height:50px; width:110px; } ul#navi li { float: left; position: relative; height: 50px; width: 110px; list-style-type:none; background-color:#666666; } ul#navi li ul { margin:0; padding:0; height:50px; } ul#navi li ul li { display: block; width: 110px; float:left; background-color:#666666; height: 50px; } ul#navi li>ul { display:none; } ul#navi li:hover>ul { display: block; background-color:#333333; } Hab auch nach dem Problem gegooglet, allerdings niemanden mit dem gleichen Problem gefunden. Vielleicht habt ihr eine Idee,was ich anders machen kann und bedanke mich schonmal im voraus. |
Sponsored Links |
|
|||
Erstmal vielen Dank für die schnelle Antwort
Interessanterweise funktioniert das ohne 'opacy', allerdings wollte ich schon meinen transparenten DivContainer haben. Gibt es da noch eine alternative? Auf jedenfall bin ich schonmal etwas schlauer geworden. |
|
||||
mit "background: rgba(220,160,140,0.5);" geht das.
Farben musst halt anpassen. Und Fallback für alte IE's machen (sofern nötig). RGB nach HEX bzw. HEX nach RGB |
|
|||
Zitat:
Vielen Dank |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit einer DropDown Liste | manuel_g | CSS | 2 | 31.03.2010 11:11 |
Suche CSS Dropdown Menü | Lloyd Larkin | CSS | 0 | 11.10.2006 21:50 |
Problem mit padding im Menü | Sp33dy G0nz4l3s | CSS | 1 | 22.09.2006 20:09 |
Mysteriöses in CSS Dropdown Menü | ph!L | CSS | 3 | 21.07.2006 13:31 |
Das Menü und mein Problem | Sven | CSS | 1 | 13.03.2005 03:07 |