zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Dropdown Menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.07.2014, 17:40
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2014
Beiträge: 3
Dave71284 befindet sich auf einem aufstrebenden Ast
Standard 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>
Der CSSCode:

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;


}
und natürlich der angehängte CSSDropdowncode:

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;

}
Vielleicht ein wenig unübersichtlich das ganze...sorry an der Stelle,aber ich bin ja noch Anfänger.
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.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.07.2014, 18:56
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

schmeiss mal alle 'opacity' raus.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.07.2014, 19:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2014
Beiträge: 3
Dave71284 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
schmeiss mal alle 'opacity' raus.
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 Zitat antworten
  #4 (permalink)  
Alt 12.07.2014, 19:42
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 12.07.2014, 19:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.07.2014
Beiträge: 3
Dave71284 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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
Perfekt! Funktioniert!
Vielen Dank
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:18 Uhr.