Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 20.07.2006, 23:52
ph!L ph!L ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.11.2003
Beiträge: 45
ph!L befindet sich auf einem aufstrebenden Ast
Standard Mysteriöses in CSS Dropdown Menü

Hi,

ich habe von http://www.cssplay.co.uk/menus/dd_valid.html ein CSS Dropdown Menü gefunden, welches ich gerade in mein CMS Template eingebaut habe.

Habe die dropdown.css eingebunden und dann das Menü so aufgerufen:

Code:
<div id="navigation" style=" color: black; font-size: medium; font-family: serif; background-color: #999; text-align: center; visibility: visible; display: block; position: absolute; top: 179px; left: 200px; width: 700px; height: 22px; border-top: 1px solid white; border-bottom: 1px solid white">
<div class="menu">

<ul>
<li><a class="hide" href="index.php">Startseite</a>
</li>
<li><a class="hide" href="index.php">Restaurants</a>
	<ul>
		<li><a href="index.php" title="Restaurant1">Restaurant1</a></li>
		<li><a href="index.php" title="Restaurant2">Restaurant2</a></li>
		<li><a href="index.php" title="Restaurant3">Restaurant3</a></li>
		<li><a href="index.php" title="Restaurant4">Restaurant4</a></li>
	</ul>
</li>
<li><a class="hide" href="index.php?module=Downloads">Feedback</a>
</ul>

</div>
					
			</div>
dropdown.css:

Code:
/* common styling */
.menu {font-family: arial, sans-serif; width:500px; position:relative; margin:0; font-size:10pt; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff;border-right: 1px solid #fff; border-left: 1px solid #fff; background:#999; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#ccc;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#F4CB01; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#F4CB01; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
Leider verursacht das beides 2 Fehler die ich mir nicht erklären kann:

1. Das Menü ist ca. 50 Pixel neben der Ebene in der es liegt versetzt
2. Das Dropdown öffnet sich, wenn man mit der Maus auf die unten ausgefahrenen Menüpunkte fährt, verschwinden diese Teilweise wieder. Das scheint aber ziemlich sporadisch zu sein.

Link zum Problem: http://ta-k.de/index.php?theme=mcdonalds

Weiß wirklich nicht warum das Menü so seltsam ausgerückt ist und auch nicht, warum das mit der Maus nicht klappt. Habe schon einiges rumprobiert, aber jetzt brauche ich wohl Hilfe von Profis

Hitzige Grüße aus Berlin,

phil

P.S.: Funzt momentan auch nur mit Firefox, es ist ja auch eine IE Variante beschrieben, aber das will die Template Engine vom CMS noch nicht mitmachen..

Geändert von ph!L (20.07.2006 um 23:55 Uhr)
Mit Zitat antworten
Sponsored Links