kostenloser Webspace werbefrei: lima-city

Untermenüs bei FOCUS und ACTIVE anzeigen

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

1. Autor dieses Themas

   psd

   psd hat kostenlosen Webspace.

   16:50, 2.7.2010

   Hey,
   
   nach langem herumprobieren wollt ich jetzt mal euch fragen, da ich keine lösung finde.
   
   Ein reines CSS menu welches durch HOVER sichtbar wird soll bei klick also durch ACTIVE sichtbarbleiben auch wenn man die maus vom HOVER nimmt.
   
   Aufbau:
   

   <ul>
   	<li.dir><a href="#">Lorem Ipsum</a>
       	<ul>
           	<li><a href="#">Lorem Ipsum</a></li>
               <li><a href="#">Lorem Ipsum</a></li>
           </ul>
       </li>	
   </ul>

   
   
   CSS bis jetzt (etwas unaufgeräumt vom testen )
   

   #main_menu ul {
   	width:800px;
   	margin:auto;
   	text-align:center;
   	position:relative;
   }
   #main_menu ul li.dir {
   	height: 30px;
   	width:160px;
   	float:left;	
   }
   #main_menu ul li.dir:hover {
   	height: 30px;
   	width:160px;
   	float:left;
   	background: url(../images/li_bg.png) no-repeat center top;
   }
   #main_menu ul li.dir ul {
   	height: 30px;
   	width:800px;
   	position:absolute;
   	left:0;
   	top:30px;
   	background:#df0279;
   }
   #main_menu ul li.dir ul li {
   	height: 30px;
   	width:120px;
   	float:left;
   	display:block;
   	background:#df0279;
   }
   #main_menu ul li.dir a {
   	line-height:30px;
   	vertical-align:middle;
   	letter-spacing:0.25px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   	color:#006f9f;
   	display:block;
   }
   #main_menu ul li.dir:hover {
   	line-height:30px;
   	vertical-align:middle;
   	letter-spacing:0.25px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   	color: #FFF;
   }
   #main_menu ul li.dir ul li a {
   	display:block;
   	line-height:30px;
   	vertical-align:middle;
   	font-size:12px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }
   #main_menu ul li.dir ul li a:hover {
   	line-height:30px;
   	vertical-align:middle;
   	font-size:12px;
   	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
   }
   
   #main_menu ul ul {
   	display:none;
   }
   #main_menu ul li.dir:hover ul {
   	display:block;
   }

   
   
   danke schonmal im vorraus
   

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

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

3. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   18:34, 2.7.2010

   Das wird so nicht funktionieren.
   
   Dein Menüpunkt hat nur solange den Status Active, wie die Maustaste gedrückt ist.
   
   Ähnlich ist es beim Focus, der eigentlich für Tastatur-/ Tabnavigation gedacht ist und prinzipiell die gleichen Eigenschaften wie Hover hat. Hilft also auch nicht weiter.
   
   FF
   
   
   
4. Autor dieses Themas

   psd

   psd hat kostenlosen Webspace.

   19:10, 2.7.2010

   danke .. schade hat wer dann villeicht eine andere lösung ? php / javascript ?
   
   Ja mit Flash wäre das einfach aber flash menu sollte die letzte Option sein !
   
   Beitrag zuletzt geändert: 2.7.2010 19:11:36 von psd

5. matthiasdunker

   matthiasdunker hat kostenlosen Webspace.

   16:11, 10.8.2010

   Wenn du es in JavaScript umsetzen willst, kannst du einfach beim Klicken die CSS-Eigenschaft display deines Layers auf block stellen.
   (Muss natürlich vorher auf none gesetzt sein)

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

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

Dir gefällt dieses Thema?