XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Mysteriöses in CSS Dropdown Menü (http://xhtmlforum.de/showthread.php?t=40868)

ph!L 20.07.2006 23:52

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

fricca 21.07.2006 02:44

zu 1.:
Du hast diesen Eintrag in einem (edit: sogar in zwei!) Stylesheet: li {margin-left: -20px;}

Wenn du die Default-Ränder der Browser nicht haben willst, dann leite dein Stylesheet mit
* {margin:0; padding:0;}
ein.

zu 2.: kann ich nicht nachvollziehen.

ph!L 21.07.2006 11:12

ah, natürlich ! daran habe ich garnicht gedacht ! das normale design stylesheet war schuld ... das passiert wenn man fertige themes editiert statt alles selbst zu schreiben ;)

Vielen Dank !

Das zweite Problem trat bei dir nicht auf, oder es trat auf du weißt aber auch nicht warum ??

IChao 21.07.2006 13:31

Liste der Anhänge anzeigen (Anzahl: 1)
Du kannst so etwas gut selbst debuggen, wenn du deine Seite im Firefox Dom Inspector öffnest, zu dem Link .hide gehst, diesem per rechtem mausklick ein hover Ereignis gibst, dann die ausklappende UL wählst, und wieder zurück auf den link.

Siehe Bild.


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019