|
|||
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> 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;} 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 22:55 Uhr) |
Sponsored Links |
|
|||
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. Geändert von fricca (21.07.2006 um 01:46 Uhr) |
Sponsored Links |
|
|||
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 ?? |
|
|||
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. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DropDown Menü per CSS | ad89 | CSS | 7 | 16.08.2013 15:40 |
CSS Menü | MadBall | CSS | 3 | 21.03.2010 03:04 |
DropDown Menü verschwindet | andre-ne | CSS | 2 | 18.11.2009 10:44 |
herunterfahrendes Menü mit CSS | Pablo | CSS | 1 | 27.12.2007 17:07 |
Popdown Menü mit CSS | Nohma | CSS | 0 | 08.10.2007 20:58 |