kostenloser Webspace werbefrei: lima-city

Unterpunkte in Navigation, die erst bei :hover erscheinen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   lorixon

   

   lorixon hat kostenlosen Webspace.

   9:25, 17.6.2015

   Hallo,
   
   ich habe mich jetzt ziemlich lange durch jegliche Foren gelesen, finde die Lösung aber nicht für meinen Fall. :(
   
   Ich bitte nur darum, mir zu helfen, dass ich Unterpunkte in einer Navigationsleiste machen kann, die erst erscheinen, wenn ich mit dem Mauszeiger über der Überkategorie bin.
   
   Dass das irgendwie mit a:hover funktionieren soll, habe ich da herauslesen können.
   
   Es kann auch nur ein nützlicher Link sein. Danke für jede Hilfe! :D
   
   CSS-Datei: Navigation
   

   #navButton .toggle {
   		text-decoration: none;
   		height: 100%;
   		left: 0;
   		position: absolute;
   		top: 0;
   		width: 100%;
   	}
   
   		#navButton .toggle:before {
   			content: "";
   			-moz-osx-font-smoothing: grayscale;
   			-webkit-font-smoothing: antialiased;
   			font-family: FontAwesome;
   			font-style: normal;
   			font-weight: normal;
   			text-transform: none !important;
   		}
   
   		#navButton .toggle:before {
   			background: rgba(144, 144, 144, 0.65);
   			border-radius: 4px;
   			color: #fff;
   			display: block;
   			font-size: 16px;
   			height: 2.25em;
   			left: 0.5em;
   			line-height: 2.25em;
   			position: absolute;
   			text-align: center;
   			top: 0.5em;
   			width: 3.5em;
   		}
   
   	#navPanel {
   		background: rgba(255, 255, 255, 0.975);
   		color: #444;
   		border-right: solid 1px rgba(144, 144, 144, 0.25);
   		box-shadow: 0.5em 0 2em 0 rgba(0, 0, 0, 0.125);
   	}
   
   		#navPanel nav {
   			padding: 0.5em 1.25em;
   		}
   
   			#navPanel nav ul {
   				list-style: none;
   				margin: 0;
   				padding: 0;
   			}
   
   				#navPanel nav ul li {
   					padding: 0;
   				}
   
   					#navPanel nav ul li:first-child a:not(.button), #navPanel nav ul li:first-child span:not(.button) {
   						border-top: 0;
   					}
   
   					#navPanel nav ul li a.button, #navPanel nav ul li span.button {
   						margin-top: 0.5em;
   					}
   
   					#navPanel nav ul li a:not(.button), #navPanel nav ul li span:not(.button) {
   						border-top: 1px solid rgba(0, 0, 0, 0.125);
   						display: block;
   						padding: 0.75em 0;
   						text-decoration: none;
   					}
   
   			#navPanel nav .button {
   				width: 100%;
   			}

   
   
   Beispiel eines Menüpunktes in der html:
   

   <nav id="nav">
   					<ul>
   						<li><a href="index.html">Home</a></li>
   						<li><a href="/wordpress">Blog</a></li>
   					</ul>
   				</nav>

   
   
   
   Was mache ich also falsch? :(
   
   LG
   Lorixon
   
   Beitrag zuletzt geändert: 17.6.2015 9:27:31 von lorixon

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. daerror

   daerror hat kostenlosen Webspace.

   10:36, 17.6.2015

   Du kannst mit css-Klasse :hover Elemente selektieren, auf denen die Maus gerade liegt.
   
   ich hab hier man ein kleines Beispiel für ein Menu bei dem die Menu-Punkte erst angezeigt werden, wenn man den Haupt-Menüpunkt hovert.
   
   http://jsfiddle.net/u45750uv/
   
   Falls das nicht zufriedenstellend sein sollte sag einfach Bescheid!
   
   Beitrag zuletzt geändert: 17.6.2015 10:37:52 von daerror

4. all-in1

   

   all-in1 hat kostenlosen Webspace.

   12:52, 17.6.2015

   Hier ist eine sehr gute Anleitung http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Men%C3%BCs#Men.C3.BCs_mit_mehreren_.28geschachtelten.29_Ebenen
   
   Du musst praktisch eine Liste in eine Liste packen und diese dann mittels CSS entsprechend Anzeigen lassen.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?