✔ Einblenden / Ausblenden

[Devil/hes]

Hallo,
Ich habe beim Erstellen eines Menüs so einige Probleme, ich hoffe ihr könnt mir helfen.
folgender css code.

.tafel
			{
	position:absolute;
	height:191px;
	width:460px;
	background-image:url(Bilder/tafel_04.gif);
	left: 2px;
	top: 148px;
			}
.einblenden 
			{
			position:absolute;
			width:600px;
			height:220px;
			display:none;			
			}
			
#head .obenmenu li:hover ul.tafel
			{
				display:block;
			
			}

und so sieht mein html teil aus:

<div id="head">
	<div id="obenmenu">
		 <ul>
			 <li><a href="#" class="hover1">Zuhause</a></li>
		 	 <li><a href="#" class="hover2">Home</a></li>
			 <li><a href="#" class="hover3">Daheim</a></li>
			 <li><a href="#" class="hover4">Weg</a></li>
			 <li><a href="#" class="hover5">undso</a></li>
			 <li><a href="#" class="hover6">weiter</a></li>
		 </ul>
	</div>
	
	<div class="einblenden">
		<div class="tafel">
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
				 <tr>
					<td colspan="3">Kategorien</td>
				 </tr>
				 <tr>
					<td>
						<ul>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
						</ul>
					</td>
					<td>
						<ul>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
						</ul>
					</td>
					<td>
						<ul>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
							<li>inhalt</li>
						</ul>
					</td>
				</tr>
			</table>
	  </div>
	</div>
</div>

ich wollte die tafel einblenden. Sobald man über einen der <li> im obenmenu geht...funktioniert aber irgendwie nicht...wäre für jede hilfe dankbar!

 

[Maik]

Hi.

Fehler Nr.1: Das Ein- und Ausblenden funktioniert in diesem Fall nur bei Nachfahren- und nicht bei Nachbarelementen.

Fehler Nr.2: Im CSS schreibst du li:hover ul.tafel, im Markup besitzt aber ein DIV die Klasse .tafel.

Dieses Stylesheet funktioniert in allen standardkonformen Browsern:

ul li ul#home { display:none; }
ul li:hover ul#home { display:block; }

<ul>
    <li><a href="#" class="hover1">Zuhause</a></li>
    <li><a href="#" class="hover2">Home</a>
           <ul id="home">
               <li>inhalt</li>
               <li>inhalt</li>
               <li>inhalt</li>
               <li>inhalt</li>
           </ul>
    </li>
    <li><a href="#" class="hover3">Daheim</a></li>
    <li><a href="#" class="hover4">Weg</a></li>
    <li><a href="#" class="hover5">undso</a></li>
    <li><a href="#" class="hover6">weiter</a></li>
</ul>

oder allgemein ohne ID- oder Klassenbezeichner:

ul li ul { display:none; }
ul li:hover ul { display:block; }

<ul>
    <li><a href="#" class="hover1">Zuhause</a></li>
    <li><a href="#" class="hover2">Home</a>
           <ul>
               <li>inhalt</li>
               <li>inhalt</li>
               <li>inhalt</li>
               <li>inhalt</li>
           </ul>
    </li>
    <li><a href="#" class="hover3">Daheim</a></li>
    <li><a href="#" class="hover4">Weg</a></li>
    <li><a href="#" class="hover5">undso</a></li>
    <li><a href="#" class="hover6">weiter</a></li>
</ul>

Falls du den IE6 mit einbeziehen möchtest, wäre JS zusätzlich erforderlich, da er die allgemeine Pseudoklasse li:hover nicht unterstützt, und somit das Submenü nicht einblendet - siehe hierzu http://www.htmldog.com/articles/suckerfish/dropdowns/.

 

[Devil/hes]

Hi Danke für die Antwort,
#head umschliesst ja die ganzen blöcke also dachte ich kann ich das einblenden auch irgendwie ansprechen?!
Mein Problem ist das die Navigation von mir mit listen gelöst wurde und zwischen liste und dem was eingeblendet werden sollte halt noch leerer platz ist deswegen habe ich einblenden vorgeschoben um den abstand der liste und des einzublendenden divs zu minimieren....ach ich weiß nicht wie ich das ausdrücken soll

beispiel:
menupunk1 menupunkt2 ....usw
(grafik)
einzublendende tabele

Hoffe das ist verständlich?
dazu hab ich menu + grafik+ einzublendende tabele in den div header gepackt....kann ich das nun irgendwie schaffen das die tabelle eingeblendet wird?

 

[Maik]

Was hindert dich daran, das Grafikelement in der Liste mitaufzunehmen?

#head ul li ul { display:none; }
#head ul li:hover ul { display:block; }
#head img {display:block; }

<div id="head">
     <div id="obenmenu">
          <ul>
              <li><a href="#" class="hover1">Zuhause</a></li>
              <li><a href="#" class="hover2">Home</a>
                   <img src="..." alt="...">
                   <ul>
                       <li>inhalt</li>
                       <li>inhalt</li>
                       <li>inhalt</li>
                       <li>inhalt</li>
                   </ul>
              </li>
              <li><a href="#" class="hover3">Daheim</a></li>
              <li><a href="#" class="hover4">Weg</a></li>
              <li><a href="#" class="hover5">undso</a></li>
              <li><a href="#" class="hover6">weiter</a></li>
          </ul>
     </div>
</div>