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..