Drop-Down-Menü

Tim110 · 1 November 2008

Hi habe hier ein Drop-Down-Menü. Den Menüunterpunkten (aa,bb,cc,...), die erst beim Mouseover sichtbar werden, möchte ich gerne ein Hintergrundbild zuweisen. Wie muss ich dies einbinden?
Danke im Voraus

Code:

<html>
<head>
<title>Titel</title>
<style>
body              {background:white;}
#navi, #navi ul   {list-style-type:none; margin:0; padding:0;}
#navi li          {width:128px;}
#navi li ul       {display:none;}
#navi li:hover ul {display:block;}
body              {behavior:url("csshover.htc");}
#navi a          {color:#000000; text-decoration:none;}
#navi li ul a     {color:#A9A9A9; text-decoration:none;}

div.box           {background-image: url(Box_bg.png);
                   width:435px; height:343px; border:1;}
div.inhalt        {padding-left:22px;
                   padding-top:50px;
                   position:absolute;
                   font-size:20;}
</style>
</head>
<body>

<div class="box"><div class="inhalt">
<ul id="navi">
  <li><a href="#">a</a>
      <ul>
      <li><a href="#">aa </a></li>
    </ul>
  </li>
  <li><a href="#">b</a>
    <ul>
      <li><a href="#">bb </a></li>
    </ul>
  </li>
  <li><a href="#">c</a>
    <ul>
      <li><a href="#">cc </a></li>
    </ul>
  </li>
  <li><a href="#">d</a>
    <ul>
      <li><a href="#">dd </a></li>
    </ul>
  </li>
  <li><a href="#">e</a>
    <ul>
      <li><a href="#">ee </a></li>
    </ul>
</ul>
</div></div>
</body>
</html>

Maximus73 · 1 November 2008

Ich habe gerade deinen Tread gelesen und ich weis jetzt nicht genau wonach du suchst aber vieleicht hilft dir ja das hier:

Stu Nicholls | CSSplay | CSS only menus

Tips und Tricks

Listamatic: one list, many options - Using CSS and a simple list to create radically different list options

Tar · 1 November 2008

Versuchs mal mit

Code:

#navi ul li ul li {background-image:url(/pfad/bild.ext);}

Tim110 · 3 November 2008

Das funktioniert leider nicht...

Habe mir überlegt, man könnte es auch nicht mit background-images, sondern mit z-index lösen. Wäre das eine sinnvolle Lösung? Gebe ich alles genau so wie folgt an, erscheint wie gewünscht an der richtigen Stelle das Bild. Leider rutscht allerdings der Text der Menüpunkte um je ein Bild nach unten, sodass das erste Bilde ohne text, und der letzte Menüpunkt wieder ohne bild ist. Weiß jemand von euch wie man die Menüpunkte korrekt darstellen lassen kann?

Der Ausschnitt meiner html-Datei:

Code:

<ul id="navi">
  <li><a href="#">Home</a></li>
  <li><a href="#">a</a>
    <ul>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">aa</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">ab</span></a></li>
    </ul>
  </li>
  <li><a href="#">b</a>
    <ul>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">ba</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">bb</span></a></li>
    </ul>
  </li>
  <li><a href="#">c</a>
    <ul>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">ca</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">cb</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">cc</span></a></li>
    </ul>
  </li>
  <li><a href="#">d</a>
    <ul>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">da</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">db</span></a></li>
    </ul>
  </li>
  <li><a href="#">e</a>
    <ul>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">ea</span></a></li>
      <li><a href="#"><span style="z-index:1; margin:0; padding:0;"><img src="images/Trans_Menü.png"></span><span style="z-index:2;">eb</span></a></li>
    </ul></li>
</ul>

CSS:

Code:

div.menu        {text-align:center;
                 text-size:12px;
                 color:#000000;
                 width:800px;
                 height:20px;
                 padding:0;
                 margin-top:160px;
                 margin-bottom:0px;
                 position:absolute;}

#navi, #navi ul   {list-style-type:none; margin:0; padding:0;}
#navi li          {width:98px; float:left; height:35px;}
#navi li ul       {display:none; padding:1px; background-image: url(images/Trans_Menü.png);}
#navi li:hover ul {display:block;  padding:1px; background-image: url(images/Trans_Menü.png);}
#navi ul li ul li {background-image: url(images/Trans_Menü.png);}
body              {behavior:url("csshover.htc");}

#navi a         {color:#808080; text-decoration:none;}
a.link          {color:#808080; text-decoration:none;}
h1              {font-size:20; color:black; padding:10px;}

Drop-Down-Menü

Tim110

Guest

Maximus73

Neues Mitglied

Tar

Aktives Mitglied

Tim110

Guest

Neueste Beiträge