Problem mit css dropdown menu

juNkfoOd · 22.04.2007, 19:52

Hallo Zusammen,

ich wollte auf meiner Seite jetzt mein Menu mal umbauen und von Java weg gehen. Und zwar habe ich das ganze jetzt als css dropdown menu (mit js hack für IE). Soweit klappt eigentlich auch alles sehr gut. Einzigstes Problem was ich jetzt habe, ist das manche Banner meine dropdownpunkte überlappen. ich habe es jetzt auch schon mit z-index probiert aber das hat leider auch keinen erfolg gebracht. hier mal ein screenshot von meinem problem. ich hoffe mir kann hier vielleicht jemand weiter helfen.

http://img178.imageshack.us/img178/2...problemgu7.jpg

Rinaldo · 22.04.2007, 20:43

Puh, mit dem Bild allein können wir nichts genaues sagen - stell uns doch bitte mal den Link zum Beispiel zur Verfügung...

juNkfoOd · 22.04.2007, 21:40

habe das ganze leider nur so lokal.
aber hier mal der code. denke das dürfte auch weiter helfen.

Code:

  <ul id="nav">
	  <li><a href="#">HOME</a></li>

	  <li><a href="#">MUSIC</a>
		  <ul>
			  <li><a href="#"> &nbsp; News</a></li>
			  <li><a href="#"> &nbsp; Charts</a></li>
			  <li><a href="#"> &nbsp; Reviews</a></li>
			  <li><a href="#"> &nbsp; Interviews</a></li>
        <li><a href="#"> &nbsp; Releases</a></li>
        <li><a href="#"> &nbsp; Audios &amp; Videos</a></li>
			  <li><a href="#"> &nbsp; Mixtapes</a></li>
        <li><a href="#"> &nbsp; Wallpaper</a></li>
        <li><a href="#"> &nbsp; Gewinnspiele</a></li>
        <li><a href="#" class="last"> &nbsp; Unsigned Hypes</a></li>
		  </ul>
	  </li>

    <li><a href="#">COMMUNITY</a>
      <ul>
        <li><a href="#"> &nbsp; Forum</a></li>
        <li><a href="#"> &nbsp; Chat</a></li>
        <li><a href="#"> &nbsp; Pointcenter</a></li>
        <li><a href="#"> &nbsp; User Toplist</a></li>
        <li><a href="#" class="last"> &nbsp; kostenlos anmelden</a></li>
      </ul>
    </li>
    
    <li><a href="#">SHOP</a>
      <ul>
        <li><a href="#"> &nbsp; Katalog</a></li>
        <li><a href="#" class="last"> &nbsp; Mein Kundenkonto</a></li>
      </ul>
    </li>
    
    <li><a href="#">LIFESTYLE</a>
      <ul>
        <li><a href="#"> &nbsp; Katalog</a></li>
        <li><a href="#" class="last"> &nbsp; Mein Kundenkonto</a></li>
      </ul>
    </li>
    
    <li><a href="#">SCENEPICS</a>
      <ul>
        <li><a href="#"> &nbsp; Scenepics</a></li>
        <li><a href="#"> &nbsp; Tourneen</a></li>
        <li><a href="#"> &nbsp; Veranstaltungen</a></li>
        <li><a href="#" class="last"> &nbsp; Locations</a></li>
      </ul>
    </li>
  
  </ul>
  <div id="clear">&nbsp;</div>
 <div id="underNavbar">&nbsp;</div>
 
 <div id="adcontainer1">
   

<iframe id="ad874ecd" name="ad874ecd" src="index-Dateien/adframe.htm" framespacing="0" allowtransparency="true" frameborder="no" height="90" scrolling="no" width="728" style="z-index: 2;">&lt;script
language='JavaScript' type='text/javascript'&gt;
&lt;!-- document.write ("&lt;nolayer&gt;"); document.write ("&lt;a
href='http://www.rapcommunity.de/adserver/adclick.php?n=ad874ecd'
target='_blank'&gt;&lt;img
src='http://www.rapcommunity.de/adserver/adview.php?what=zone:5&amp;amp;n=ad874ecd'
border='0' alt=''&gt;&lt;/a&gt;"); document.write ("&lt;/nolayer&gt;");
document.write ("&lt;ilayer id='layerad874ecd' visibility='hidden'
width='728' height='90'&gt;&lt;/ilayer&gt;");
//--&gt;
&lt;/script&gt;&lt;noscript&gt;&lt;a
href='http://www.rapcommunity.de/adserver/adclick.php?n=ad874ecd'
target='_blank'&gt;&lt;img
src='http://www.rapcommunity.de/adserver/adview.php?what=zone:5&amp;amp;n=ad874ecd'
border='0' alt=''&gt;&lt;/a&gt;&lt;/noscript&gt;</iframe><a href="http://www.rapcommunity.de/advertising-promo.php"><img src="index-Dateien/adbar_largesize.jpg" border="0"></a> </div>

Code:

#adcontainer1 {
	width: 760px;
	margin: 5 0 10 0;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
	background-color: #666666;
  z-index: 1;
}

#nav, #nav ul {
  width: 762px;
	padding: 0;
	margin: 0;
	list-style: none;
  z-index: 2;
}

#nav a {
	display: block;
  text-align: center;
	width: 126px;
  padding: 7px 0;
  background-color: #d3af58;
  border-right: 1px solid #fff;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  z-index: 2;
}

#nav a:hover {
  background-color: #1ba6b2;
  border: 0px;
}

#nav li {
	float: left;
	width: 126px;
  border-right: 1px solid #fff;
  border-top: 1px solid #fff;
  z-index: 2;
}

#nav li ul {
	position: absolute;
	width: 126px;
	left: -999em;
  z-index: 2;
}

#nav li li {
  border-top: 1px solid #fff;
  height: 25px;
  z-index: 2;
}

#nav li li a {
  background-color: #666;
  text-align: left;
  border: 0px;
  height: 25px;
  padding: 2px 0;
}

#nav li li a.last {
  border-bottom: 5px solid #ba312b;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}

Mich@el · 22.04.2007, 22:24

Dein Dropdown-Menü funktioniert auch nur so einigermaßen im FF und Opera. Einigermaßen deswegen, da die untersten Links bei Community, Shop und Lifestyle nur knapp zu lesen sind. IE 6 übrigens Totalausfall!

Grüße
Michael

juNkfoOd · 22.04.2007, 22:27

für den IE habe ich einen js hack.
ja, das mit dem knapp zu lesen hatte ich auch schon. da habe ich allerdings ein fehler rein gebracht. das ist jedoch nicht so das problem. vielmehr ist das problem eben die sache das das menu zum teil hinter dem banner verschwindet.

Mich@el · 22.04.2007, 23:04

Hier

Zitat:

gibst Du einen höheren z-index an als im CSS-Style! Nach dem was du im CSS-Style vorgegeben hast, sollte es auch funktionieren. adcontainer1 = z-index 1
und Navi z-index 2

juNkfoOd · 23.04.2007, 00:35

hmm, das hat immer noch nicht geklapt.
ich glaube das hängt irgendwie mit dem banner zusammen..

ich habe das ganze mal hochgeladen.
http://xyz.rapcommunity.de/
lasst euch aber nicht verwirren weil nicht alle grafiken gehen und der quellcode noch etwas "wüst" ist